下拉更新或者上拉更新的时候 列表中有链接 a 监听了tap事件 如何判断出想下拉而不是点击链接a呢
何必
- 发布：2014-09-23 00:59
- 更新：2014-09-29 00:23
- 阅读：4541
下拉更新或者上拉更新的时候 列表中有链接 a 监听了tap事件的区分
分类：MUI
你只要能区别点击和拖动就好了。
下拉和上拉，在plus规范里有单独的事件，不会冲突的。
你新建移动App时看下hello mui的例子就知道里。
-
-
-
何必 (作者)
回复 DCloud_heavensoft:贴了代码 就是在下拉更新的时候 页面用js追加上a a绑定有tap事件 我改成click事件好像好点 但是这个click在移动端感觉不合适呀
2014-09-23 01:36
-
何必 (作者)
代码如下
<!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>
-
下拉刷新的操作方式，是按住不放向下拖。这个操作是不会触发tap事件的啊。
tap的触发有两个条件。
1.点击时间小于250ms
2.移动距离小于一定数值
当你按住不放向下拖的时候，这个时间肯定是超过250ms，移动距离也一定会超过tap触发的最大距离的。
也就是说，正确的下拉刷新的操作方式理论上是不会触发A链接的tap事件的2014-09-23 02:05
JSoon
什么时候出下个版本，能给出个预计时间吗
2014-11-17 11:45