pullrefresh_with_tab上拉一次后，无论点击还是长按总能触发一次下拉

分类：MUI
上拉加载
pullrefresh_with_tab上拉一次后，无论点击还是长按总能触发一次下拉，触发一次下拉后再点击和长按就都正常了。
2018-01-16 16:01 负责人:无分享
1 个回复

BoredApe - 有问题就会有答案。
上传能重现问题的测试工程
3***@qq.com (作者)
<!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-bar~.mui-content .mui-fullscreen {  

            top: 44px;  

            height: auto;  

        }  

        .mui-pull-top-tips {  

            position: absolute;  

            top: -20px;  

            left: 50%;  

            margin-left: -25px;  

            width: 40px;  

            height: 40px;  

            border-radius: 100%;  

            z-index: 1;  

        }  

        .mui-bar~.mui-pull-top-tips {  

            top: 24px;  

        }  

        .mui-pull-top-wrapper {  

            width: 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-tips .mui-pull-loading {  

            /*-webkit-backface-visibility: hidden;  

            -webkit-transition-duration: 400ms;  

            transition-duration: 400ms;*/  



            margin: 0;  

        }  

        .mui-pull-top-wrapper .mui-icon,  

        .mui-pull-top-wrapper .mui-spinner {  

            margin-top: 7px;  

        }  

        .mui-pull-top-wrapper .mui-icon.mui-reverse {  

            /*-webkit-transform: rotate(180deg) translateZ(0);*/  

        }  

        .mui-pull-bottom-tips {  

            text-align: center;  

            background-color: #efeff4;  

            font-size: 15px;  

            line-height: 40px;  

            color: #777;  

        }  

        .mui-pull-top-canvas {  

            overflow: hidden;  

            background-color: #fafafa;  

            border-radius: 40px;  

            box-shadow: 0 4px 10px #bbb;  

            width: 40px;  

            height: 40px;  

            margin: 0 auto;  

        }  

        .mui-pull-top-canvas canvas {  

            width: 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">选项卡切换练习</h1>  

    </header>  

    <div class="mui-content">  

        <div id="slider" class="mui-slider mui-fullscreen">  

            <div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">  

                <div class="mui-scroll">  

                    <a class="mui-control-item mui-active" href="#item1mobile">  

                        推荐  

                    </a>  

                    <a class="mui-control-item" href="#item2mobile">  

                        热点  

                    </a>  

                    <a class="mui-control-item" href="#item3mobile">  

                        北京  

                    </a>  

                </div>  

            </div>  

            <div class="mui-slider-group">  

                <div id="item1mobile" class="mui-slider-item mui-control-content mui-active">  

                    <div id="scroll1" class="mui-scroll-wrapper">  

                        <div class="mui-scroll">  

                            <ul class="mui-table-view">  

                                <li class="mui-table-view-cell">  

                                    第1个选项卡子项-1  

                                </li>  

                                <li class="mui-table-view-cell">  

                                    第1个选项卡子项-2  

                                </li>  

                                <li class="mui-table-view-cell">  

                                    第1个选项卡子项-3  

                                </li>  

                                <li class="mui-table-view-cell">  

                                    第1个选项卡子项-4  

                                </li>  

                                <li class="mui-table-view-cell">  

                                    第1个选项卡子项-5  

                                </li>  

                            </ul>  

                        </div>  

                    </div>  

                </div>  

                <div id="item2mobile" class="mui-slider-item mui-control-content">  

                    <div class="mui-scroll-wrapper">  

                        <div class="mui-scroll">  

                            <ul class="mui-table-view">  

                                <li class="mui-table-view-cell">  

                                    第2个选项卡子项-1  

                                </li>  

                                <li class="mui-table-view-cell">  

                                    第2个选项卡子项-2  

                                </li>  

                                <li class="mui-table-view-cell">  

                                    第2个选项卡子项-3  

                                </li>  

                                <li class="mui-table-view-cell">  

                                    第2个选项卡子项-4  

                                </li>  

                                <li class="mui-table-view-cell">  

                                    第2个选项卡子项-5  

                                </li>  

                            </ul>  

                        </div>  

                    </div>  

                </div>  

                <div id="item3mobile" class="mui-slider-item mui-control-content">  

                    <div class="mui-scroll-wrapper">  

                        <div class="mui-scroll">  

                            <ul class="mui-table-view">  

                                <li class="mui-table-view-cell">  

                                    第3个选项卡子项-1  

                                </li>  

                                <li class="mui-table-view-cell">  

                                    第3个选项卡子项-2  

                                </li>  

                                <li class="mui-table-view-cell">  

                                    第3个选项卡子项-3  

                                </li>  

                                <li class="mui-table-view-cell">  

                                    第3个选项卡子项-4  

                                </li>  

                                <li class="mui-table-view-cell">  

                                    第3个选项卡子项-5  

                                </li>  

                            </ul>  

                        </div>  

                    </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 type="text/javascript" src="../../测试/js/jquery-1.11.1.js" ></script>  

    <script>  

        mui.init({  

            gestureConfig: {  

                longtap: true,  

                release: true  

            }  

        });  



        $('.mui-table-view-cell').on('tap', function(){  

            $(this).html('点击了这条');  

        });  



        $('.mui-table-view-cell').on('longtap', function(){  

            $(this).html('longtap');  

        });  



        (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);  

                            }  

                        },  

                        up: {  

                            callback: function() {  

                                var self = this;  

                                setTimeout(function() {  

                                    var ul = self.element.querySelector('.mui-table-view');  

                                    ul.appendChild(createFragment(ul, index, 5));  

                                    self.endPullUpToRefresh();  

                                }, 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 = '第' + (index + 1) + '个选项卡子项-' + (length + (reverse ? (count - i) : (i + 1)));  

                        fragment.appendChild(li);  

                    }  

                    return fragment;  

                };  

            });  

        })(mui);  

    </script>  

</body>
</html>
2018-02-01 09:29
3***@qq.com (作者)

先上拉加载一下就能出来

2018-02-01 09:30
该问题目前已经被锁定, 无法添加新回复
pullrefresh_with_tab上拉一次后，无论点击还是长按总能触发一次下拉

1 个回复

公告

相关问题

pullrefresh_with_tab上拉一次后，无论点击还是长按总能触发一次下拉

与内容相关的链接

1 个回复

公告

相关问题
