何必
何必
  • 发布:2014-09-23 00:59
  • 更新:2014-09-29 00:23
  • 阅读:4391

下拉更新或者上拉更新的时候 列表中有链接 a 监听了tap事件的区分

分类:MUI

下拉更新或者上拉更新的时候 列表中有链接 a 监听了tap事件 如何判断出想下拉而不是点击链接a呢

2014-09-23 00:59 负责人:无 分享
已邀请:
DCloud_UNI_FXY

DCloud_UNI_FXY

5+版本的下拉刷新触发tap事件的问题,预计下个版本修复

  • JSoon

    什么时候出下个版本,能给出个预计时间吗

    2014-11-17 11:45

DCloud_heavensoft

DCloud_heavensoft

你只要能区别点击和拖动就好了。
下拉和上拉,在plus规范里有单独的事件,不会冲突的。
你新建移动App时看下hello mui的例子就知道里。

  • 何必 (作者)

    就是我刚点列表的时候 就触发了a的tap事件 但是我可能想下拉

    2014-09-23 01:09

  • DCloud_heavensoft

    那你岂不是滚动屏幕也不行了?代码还是有地方写错了吧。邀请下hbcui1984和fxy帮看看。

    2014-09-23 01:13

  • 何必 (作者)

    回复 DCloud_heavensoft:贴了代码 就是在下拉更新的时候 页面用js追加上a a绑定有tap事件 我改成click事件好像好点 但是这个click在移动端感觉不合适呀

    2014-09-23 01:36

  • 何必 (作者)

    滚屏没问题的

    2014-09-23 01:38

何必

何必 (作者)

就是我刚点列表的时候 就触发了a的tap事件 但是我可能想下拉

何必

何必 (作者)

代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/mui.js"></script>
<link href="css/mui.min.css" rel="stylesheet" />
<style type="text/css">

slider {

        /*避免导航边框和列表背景边框重叠,看起来像两条边框似得;*/  
        margin-top: -1px;  
        height: 160px;  
    }  
</style>  
<script type="text/javascript" charset="utf-8">  
    mui.init();  
</script>  

</head>
<body>
<div class="mui-content">
<div id="slider" class="mui-slider" style="height:160px;">
<div class="mui-slider-group mui-slider-loop">
<div class="mui-slider-item">
<a href="#">
<img src="../images/yuantiao.jpg">
<p class="mui-slider-title">静静看这世界</p>
</a>
</div>
<div class="mui-slider-item">
<a href="#">
<img src="../images/shuijiao.jpg">
<p class="mui-slider-title">幸福就是可以一起睡觉</p>
</a>
</div>
<div class="mui-slider-item">
<a href="#">
<img src="../images/muwu.jpg">
<p class="mui-slider-title">想要一间这样的木屋,静静的喝咖啡</p>
</a>
</div>
<div class="mui-slider-item">
<a href="#">
<img src="../images/cbd.jpg">
<p class="mui-slider-title">Color of SIP CBD</p>
</a>
</div>
<div class="mui-slider-item">
<a href="#">
<img src="../images/yuantiao.jpg">
<p class="mui-slider-title">静静看这世界</p>
</a>
</div>
<div class="mui-slider-item">
<a href="#">
<img src="../images/shuijiao.jpg">
<p class="mui-slider-title">幸福就是可以一起睡觉</p>
</a>
</div>
</div>
<div class="mui-slider-indicator mui-text-right">
<div class="mui-indicator mui-active"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
</div>
</div>

    <div class="mui-content-padded">  

        <ul class="mui-table-view">  
            <li class="mui-table-view-cell mui-media">  
                <a href="#">  
                    <img class="mui-media-object mui-pull-left" src="../images/shuijiao.jpg">  
                    <div class="mui-media-body">  
                        幸福  
                        <p class='mui-ellipsis'>能和心爱的人一起睡觉,是件幸福的事情;可是,打呼噜怎么办?</p>  
                    </div>  
                </a>  
            </li>  
            <li class="mui-table-view-cell mui-media">  
                <a href="#">  
                    <img class="mui-media-object mui-pull-left" src="../images/muwu.jpg">  
                    <div class="mui-media-body">  
                        木屋  
                        <p class='mui-ellipsis'>想要这样一间小木屋,夏天挫冰吃瓜,冬天围炉取暖.</p>  
                    </div>  
                </a>  
            </li>  
            <li class="mui-table-view-cell mui-media">  
                <a href="#">  
                    <img class="mui-media-object mui-pull-left" src="../images/cbd.jpg">  
                    <div class="mui-media-body">  
                        CBD  
                        <p class='mui-ellipsis'>烤炉模式的城,到黄昏,如同打翻的调色盘一般.</p>  
                    </div>  
                </a>  
            </li>  
            <li class="mui-table-view-cell mui-media">  
                <a href="#">  
                    <img class="mui-media-object mui-pull-left" src="../images/yuantiao.jpg">  
                    <div class="mui-media-body">  
                        远眺  
                        <p class='mui-ellipsis'>静静的看这个世界,最后终于疯了</p>  
                    </div>  
                </a>  
            </li>  

        </ul>  

    </div>  
</div>  
<script>  
    var slider = mui("#slider");  
    slider.slider({  
        slideshowDelay: 4000  
    });  
    //初始化预加载详情页面  
    mui.init({  
        swipeBack: false,  
        pullRefresh: {  
            container: '.mui-content-padded',  
            down: {  
                callback: pulldownRefresh  
            },  
            up: {  
                contentrefresh: '正在加载...',  
                callback: pullupRefresh  
            }  
        }  
    }  
    );  
    var detailPage = null;  
    //添加列表项的点击事件  
    mui('.mui-content').on('tap', 'a', function (e) {  
        var self = this;  
        setTimeout(function () {  
            var id = self.getAttribute('id');  
            //console.log(id);  
            if (id == null) {  
                return;  
            }  
            //获得详情页面  
            if (!detailPage) {  

                detailPage = plus.webview.create('detail.html', 'detail.html', {  
                    top: '48px',  
                    bottom: '50px'  
                });  

                //触发详情页面的newsId事件  
                mui.fire(detailPage, 'newsId', {  
                    id: id  
                });  
                detailPage.show();  
                //alert(detailPage);  
            }  
            else {  
                mui.fire(detailPage, 'newsId', {  
                    id: id  
                });  
                detailPage.show();  
            }  
        }, 200);  
    });  

    /**  
     * 下拉刷新具体业务实现  
     */  
    function pulldownRefresh(callback) {  
        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';  
                var innerHtml = '<a id=' + (i + 1) + '>';  
                innerHtml += '<img class="mui-media-object mui-pull-left" src="../images/muwu.jpg">';  
                innerHtml += '<div class="mui-media-body">';  
                innerHtml += '远眺' + (i + 1);  
                innerHtml += '<p class="mui-ellipsis">静静的看这个世界,最后终于疯了</p>';  
                innerHtml += '</div>';  
                innerHtml += '</a>';  
                li.innerHTML = innerHtml;  
                //下拉刷新,新纪录插到最前面;  
                table.insertBefore(li, table.firstChild);  
            }  
            callback(); //refresh completed  
        }, 1500);  
    }  
    /**  
     * 上拉加载具体业务实现  
     */  
    function pullupRefresh(callback) {  
        setTimeout(function () {  
            callback(); //refresh completed  
            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';  
                var innerHtml = '<a href="#" class="mui-action-back">';  
                innerHtml += '<img class="mui-media-object mui-pull-left" src="../images/muwu.jpg">';  
                innerHtml += '<div class="mui-media-body">';  
                innerHtml += '远眺' + (i + 1);  
                innerHtml += '<p class="mui-ellipsis">静静的看这个世界,最后终于疯了</p>';  
                innerHtml += '</div>';  
                innerHtml += '</a>';  
                li.innerHTML = innerHtml;  
                table.appendChild(li);  
            }  
        }, 1500);  
    }  

    mui.plusReady(function () {  
        //打印出预加载的页面  
        setTimeout(function () {  
            var array = plus.webview.all();  
            if (array) {  
                for (var i = 0, len = array.length; i < len; i++) {  
                    console.log(array[i].getURL());  
                }  
            }  
        }, 5000);  

    });  
</script>  

</body>
</html>

  • DCloud_UNI_FXY

    下拉刷新的操作方式,是按住不放向下拖。这个操作是不会触发tap事件的啊。

    tap的触发有两个条件。

    1.点击时间小于250ms

    2.移动距离小于一定数值

    当你按住不放向下拖的时候,这个时间肯定是超过250ms,移动距离也一定会超过tap触发的最大距离的。

    也就是说,正确的下拉刷新的操作方式理论上是不会触发A链接的tap事件的

    2014-09-23 02:05

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