基于bettor-scroll实现页面上下拉刷新,效果完美。我的资源中有better-scroll的js
注意:
1.每次处理完数据列表时,需要重新计算页面刷新区高度,确保正常:scroll.refresh()
2.使用scroll.hasVerticalScroll = true 手动设置是否可以上下拉刷新
/* 列表容器 */
.list-wrapper {
position: fixed;
z-index: 1;
top: 2.2rem;
bottom: 50px;
width: 100%;
background: #fff;
overflow: hidden;
}
/* 下拉、上拉提示信息 */
.top-tip{
top : -.5rem;
position: absolute;
width: 76%;
text-align: center;
color: #777;
background: #fff;
font-size: .24rem;
}
.bottom-tip{
width: 76%;
text-align: center;
color: #777;
background: #fff;
font-size: .24rem;
}
/* 全局提示信息 */
.alert{
display: none;
position: fixed;
top: 55px;
left: 0;
z-index: 2;
width: 100%;
height: 35px;
line-height: 35px;
text-align: center;
color: #fff;
font-size: 12px;
background: rgba(7, 17, 27, 0.7);
}
页面:
<div>
<div class="list-wrapper list-wrapper-hook mylist">
<div id="right" class="sort-list-item" >
<div class="top-tip"><span class="refresh-hook">下拉刷新</span></div>
//数据列表
<div class="bottom-tip"><span class="loading-hook">查看更多</span></div>
</div>
</div>
<div class="alert alert-hook">刷新成功</div>
</div>
js:
var srcoll = null;
function initScroll() {
scroll = new window.BScroll('.list-wrapper-hook', {
probeType: 1,
tap : true,
click : true,
stopPropagation : true,
preventDefault : true,
bounce : true,
});
scroll.on('touchend', function (position) {
if (position.y > 30) {
//下拉
setTimeout(function () {
scroll.refresh();
scroll.hasVerticalScroll = true;
}, 500);
}else if(position.y < (this.maxScrollY - 30)) {
$(".loading-hook").html( '加载中...')
setTimeout(function () {
//上拉
$(".loading-hook").html( '查看更多')
scroll.refresh();
scroll.hasVerticalScroll = true;
}, 500);
}
});
}