3***@qq.com
3***@qq.com
  • 发布:2018-01-16 16:01
  • 更新:2018-01-16 16:54
  • 阅读:961

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

分类:MUI

pullrefresh_with_tab上拉一次后,无论点击还是长按总能触发一次下拉,触发一次下拉后再点击和长按就都正常了。

2018-01-16 16:01 负责人:无 分享
已邀请:
BoredApe

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

该问题目前已经被锁定, 无法添加新回复