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>