wuwenhui917
wuwenhui917
  • 发布:2015-11-23 15:18
  • 更新:2016-10-09 17:49
  • 阅读:2033

下拉刷新导致 tap,logtap事件可能不触发

分类:MUI

在下拉刷新时,点击其他元素tap和longtap事件触发不了,采用子页面
mui.init({
pullRefresh: { //下拉刷新初始化
container: '#pullrefresh',
down: {
callback: init
}
},

方式

2015-11-23 15:18 负责人:无 分享
已邀请:
DCloud_UNI_FXY

DCloud_UNI_FXY

hello-mui里边测试了吗?

wuwenhui917

wuwenhui917 (作者)

是的,在pullrefresh_sub.html添加如下

代码如下:
<!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">  
</head>  

<body>  
    <!--下拉刷新容器-->  
    <div id="pullrefresh" class="mui-content mui-scroll-wrapper">  
        <div class="mui-scroll">  
            <!--数据列表-->  
            <ul class="mui-table-view mui-table-view-chevron">  

            </ul>  
        </div>  
    </div>  
    <script src="../js/mui.js"></script>  
    <script>  
        mui.init({  
            pullRefresh: {  
                container: '#pullrefresh',  
                down: {  
                    callback: pulldownRefresh  
                },  
                up: {  
                    contentrefresh: '正在加载...',  
                    callback: pullupRefresh  
                }  
            },  
            gestureConfig: { //手势开启  
                doubletap: true,  
                longtap: true,  
                swipe: true  
            }  
        });  

        mui('.mui-scroll').on('longtap', '.mui-table-view-cell',  
            function(e) {  
                e.preventDefault()  
                window.alert('longtap')  
                //selectedTicket = appQueue.showMask(this.id, selectedTicket);  
                return false;  
            });  
        mui('.mui-scroll').on('tap', '.mui-table-view-cell',  
            function(e) {  
                e.preventDefault()  
                window.alert('tap ticket');  

                return false  
                //AppIdentify.identifyModel(cusId,cusObj.innerText,ticketId);  
            });  

        /**  
         * 下拉刷新具体业务实现  
         */  
        function pulldownRefresh() {  
            setTimeout(function() {  
                var table = document.body.querySelector('.mui-table-view');  
                var cells = document.body.querySelectorAll('.mui-table-view-cell');  
                for (var i = cells.length, len = i + 3; i < len; i++) {  
                    var li = document.createElement('li');  
                    li.className = 'mui-table-view-cell';  
                    li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';  
                    //下拉刷新,新纪录插到最前面;  
                    table.insertBefore(li, table.firstChild);  
                }  
                mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed  
            }, 1500);  
        }  
        var count = 0;  
        /**  
         * 上拉加载具体业务实现  
         */  
        function pullupRefresh() {  
            setTimeout(function() {  
                mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。  
                var table = document.body.querySelector('.mui-table-view');  
                var cells = document.body.querySelectorAll('.mui-table-view-cell');  
                for (var i = cells.length, len = i + 20; i < len; i++) {  
                    var li = document.createElement('li');  
                    li.className = 'mui-table-view-cell';  
                    li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';  
                    table.appendChild(li);  
                }  
            }, 1500);  
        }  
        if (mui.os.plus) {  
            mui.plusReady(function() {  
                setTimeout(function() {  
                    mui('#pullrefresh').pullRefresh().pullupLoading();  
                }, 1000);  

            });  
        } else {  
            mui.ready(function() {  
                mui('#pullrefresh').pullRefresh().pullupLoading();  
            });  
        }  
    </script>  
</body>  

</html>

wuwenhui917

wuwenhui917 (作者)

是的,在pullrefresh_sub.html添加如下

代码如下:

<!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">  
    </head>  

    <body>  
        <!--下拉刷新容器-->  
        <div id="pullrefresh" class="mui-content mui-scroll-wrapper">  
            <div class="mui-scroll">  
                <!--数据列表-->  
                <ul class="mui-table-view mui-table-view-chevron">  

                </ul>  
            </div>  
        </div>  
        <script src="../js/mui.js"></script>  
        <script>  
            mui.init({  
                pullRefresh: {  
                    container: '#pullrefresh',  
                    down: {  
                        callback: pulldownRefresh  
                    },  
                    up: {  
                        contentrefresh: '正在加载...',  
                        callback: pullupRefresh  
                    }  
                },  
                gestureConfig: { //手势开启  
                    doubletap: true,  
                    longtap: true,  
                    swipe: true  
                }  
            });  

            mui('.mui-scroll').on('longtap', '.mui-table-view-cell',  
                function(e) {  
                    e.preventDefault()  
                    window.alert('longtap')  
                    //selectedTicket = appQueue.showMask(this.id, selectedTicket);  
                    return false;  
                });  
            mui('.mui-scroll').on('tap', '.mui-table-view-cell',  
                function(e) {  
                    e.preventDefault()  
                    window.alert('tap ticket');  

                    return false  
                    //AppIdentify.identifyModel(cusId,cusObj.innerText,ticketId);  
                });  

            /**  
             * 下拉刷新具体业务实现  
             */  
            function pulldownRefresh() {  
                setTimeout(function() {  
                    var table = document.body.querySelector('.mui-table-view');  
                    var cells = document.body.querySelectorAll('.mui-table-view-cell');  
                    for (var i = cells.length, len = i   3; i < len; i  ) {  
                        var li = document.createElement('li');  
                        li.className = 'mui-table-view-cell';  
                        li.innerHTML = '<a class="mui-navigate-right">Item '   (i   1)   '</a>';  
                        //下拉刷新,新纪录插到最前面;  
                        table.insertBefore(li, table.firstChild);  
                    }  
                    mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed  
                }, 1500);  
            }  
            var count = 0;  
            /**  
             * 上拉加载具体业务实现  
             */  
            function pullupRefresh() {  
                setTimeout(function() {  
                    mui('#pullrefresh').pullRefresh().endPullupToRefresh((  count > 2)); //参数为true代表没有更多数据了。  
                    var table = document.body.querySelector('.mui-table-view');  
                    var cells = document.body.querySelectorAll('.mui-table-view-cell');  
                    for (var i = cells.length, len = i   20; i < len; i  ) {  
                        var li = document.createElement('li');  
                        li.className = 'mui-table-view-cell';  
                        li.innerHTML = '<a class="mui-navigate-right">Item '   (i   1)   '</a>';  
                        table.appendChild(li);  
                    }  
                }, 1500);  
            }  
            if (mui.os.plus) {  
                mui.plusReady(function() {  
                    setTimeout(function() {  
                        mui('#pullrefresh').pullRefresh().pullupLoading();  
                    }, 1000);  

                });  
            } else {  
                mui.ready(function() {  
                    mui('#pullrefresh').pullRefresh().pullupLoading();  
                });  
            }  
        </script>  
    </body>  

</html>
wuwenhui917

wuwenhui917 (作者)

不稳定,特别是longtap,有时不触发!

  • DCloud_UNI_FXY

    手机型号,系统版本?我这里测试没问题,只要长按手指不移动,就会弹出longtap

    2015-11-23 16:38

  • wuwenhui917 (作者)

    你那边每次都可以出来? Android5.0 三星pad,是不稳定,有时就出不来,观察了一下,是cancle触发很快,吧timer给清了

    2015-11-23 17:06

wuwenhui917

wuwenhui917 (作者)

function pullupRefresh() {
setTimeout(function() {
mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。
var table = document.body.querySelector('.mui-table-view');
var cells = document.body.querySelectorAll('.mui-table-view-cell');
for (var i = cells.length, len = i + 20; i < len; i++) {
var li = document.createElement('li');
li.className = 'mui-table-view-cell';
li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
table.appendChild(li);
}
}, 200);
}

时间设小一点,基本上是点3次就会有一次longtap无响应

  • DCloud_UNI_FXY

    录个视频出来我看看你怎么操作的

    2015-11-23 18:02

蓓岑2015

蓓岑2015

我是用三星note5手机,发现longtap经常不响应,请问楼主最后是怎么解决的?

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