下拉更新或者上拉更新的时候 列表中有链接 a 监听了tap事件 如何判断出想下拉而不是点击链接a呢
![何必](https://img-cdn-tc.dcloud.net.cn/account/identicon/ff0d0e4b585d4955622ccfa1515a078b.png)
- 发布:2014-09-23 00:59
- 更新:2014-09-29 00:23
- 阅读:4452
下拉更新或者上拉更新的时候 列表中有链接 a 监听了tap事件的区分
![DCloud_heavensoft](http://img-cdn-tc.dcloud.net.cn/uploads/avatar/000/00/00/16_avatar_mid.jpg?v=0)
你只要能区别点击和拖动就好了。
下拉和上拉,在plus规范里有单独的事件,不会冲突的。
你新建移动App时看下hello mui的例子就知道里。
-
-
-
何必 (作者)
回复 DCloud_heavensoft:贴了代码 就是在下拉更新的时候 页面用js追加上a a绑定有tap事件 我改成click事件好像好点 但是这个click在移动端感觉不合适呀
2014-09-23 01:36
-
![何必](https://img-cdn-tc.dcloud.net.cn/account/identicon/ff0d0e4b585d4955622ccfa1515a078b.png)
何必 (作者)
代码如下
<!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>
JSoon
什么时候出下个版本,能给出个预计时间吗
2014-11-17 11:45