zoukankan      html  css  js  c++  java
  • mui 下拉刷新

    mui 下拉刷新

    此文提供的是mui这种下拉刷新.悬浮于页面上,比较好用.

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="utf-8">
            <title>Hello MUI</title>
            <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
            <meta name="apple-mobile-web-app-capable" content="yes">
            <meta name="apple-mobile-web-app-status-bar-style" content="black">
    
            <link rel="stylesheet" href="../css/mui.min.css">
            <style>
                html,
                body {
                    background-color: #efeff4;
                }
                .mui-pull-top-tips {
                    position: absolute;
                    top: -20px;
                    left: 50%;
                    margin-left: -25px;
                     40px;
                    height: 40px;
                    border-radius: 100%;
                    z-index: 1;
                }
                .mui-pull-top-wrapper {
                     42px;
                    height: 42px;
                    display: block;
                    text-align: center;
                    background-color: #efeff4;
                    border: 1px solid #ddd;
                    border-radius: 25px;
                    background-clip: padding-box;
                    box-shadow: 0 4px 10px #bbb;
                    overflow: hidden;
                }
                .mui-pull-top-tips.mui-transitioning {
                    -webkit-transition-duration: 200ms;
                    transition-duration: 200ms;
                }
                .mui-pull-top-canvas canvas {
                     40px;
                }
                .mui-slider-indicator.mui-segmented-control {
                    background-color: #efeff4;
                }
                
                
            </style>
        </head>
    
        <body>
            <header class="mui-bar mui-bar-nav">
                <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
                <h1 class="mui-title">mui下拉刷新</h1>
            </header>
            
            
                <div id="slider" class="mui-slider mui-fullscreen">
                    <div class="mui-slider-group">
                        <div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
                            <div class="mui-scroll-wrapper">
                                <div class="mui-scroll">
                                    <ul class="mui-table-view">
                                        <li class="mui-table-view-cell">
                                            选项卡子项-1
                                        </li>
                                        <li class="mui-table-view-cell">
                                            选项卡子项-2
                                        </li>
                                        <li class="mui-table-view-cell">
                                            选项卡子项-3
                                        </li>
                                        <li class="mui-table-view-cell">
                                            选项卡子项-4
                                        </li>
                                        <li class="mui-table-view-cell">
                                            选项卡子项-5
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
    
                    </div>
                </div>
            <script src="../js/mui.min.js"></script>
            <script src="../js/mui.pullToRefresh.js"></script>
            <script src="../js/mui.pullToRefresh.material.js"></script>
            <script>
                mui.init();
                (function($) {
                    //阻尼系数
                    var deceleration = mui.os.ios?0.003:0.0009;
                    $('.mui-scroll-wrapper').scroll({
                        bounce: false,
                        indicators: true, //是否显示滚动条
                        deceleration:deceleration
                    });
                    $.ready(function() {
                        //循环初始化所有下拉刷新,上拉加载。
                        $.each(document.querySelectorAll('.mui-slider-group .mui-scroll'), function(index, pullRefreshEl) {
                            $(pullRefreshEl).pullToRefresh({
                                down: {
                                    callback: function() {
                                        var self = this;
                                        setTimeout(function() {
                                            var ul = self.element.querySelector('.mui-table-view');
                                            ul.insertBefore(createFragment(ul, index, 10, true), ul.firstChild);
                                            self.endPullDownToRefresh();
                                        }, 1000);
                                    }
                                },
                            });
                        });
                        var createFragment = function(ul, index, count, reverse) {
                            var length = ul.querySelectorAll('li').length;
                            var fragment = document.createDocumentFragment();
                            var li;
                            for (var i = 0; i < count; i++) {
                                li = document.createElement('li');
                                li.className = 'mui-table-view-cell';
                                li.innerHTML = '选项卡子项-' + (length + (reverse ? (count - i) : (i + 1)));
                                fragment.appendChild(li);
                            }
                            return fragment;
                        };
                    });
                })(mui);
                
            </script>
        </body>
    
    </html>
  • 相关阅读:
    771. Jewels and Stones
    706. Design HashMap
    811. Subdomain Visit Count
    733. Flood Fill
    117. Populating Next Right Pointers in Each Node II
    250. Count Univalue Subtrees
    94. Binary Tree Inorder Traversal
    116. Populating Next Right Pointers in Each Node
    285. Inorder Successor in BST
    292. Nim Game Java Solutin
  • 原文地址:https://www.cnblogs.com/ooo0/p/6257421.html
Copyright © 2011-2022 走看看