<template>
<div class="wrapper" ref="wrapper">
<ul class="content">
<li>123456</li>
<li>123456</li>
<li>123456</li>
<li>123456</li>
<li>123456</li>
</ul>
</div>
</template>
<style scoped>
/* 对于需要滚动的 */
.wrapper {
position: fixed;
left: 0;
top: 80px;
bottom: 0;
width: 100%;
overflow: hidden;
}
</style>
// better-scroll开始
// 初始化better-scroll得到scroll对象时必须保证DOM结构渲染完毕,
this.$nextTick(() => {
this.myScroll = new BScroll(this.$refs.wrapper, {
scrollY: true,
pullDownRefresh: {
threshold: 50,
probeType: 3
},
pullUpLoad: {
threshold: 744
}
});
this.myScroll.on("pullingDown", pos => {
console.log("下拉刷新!", pos);
this.$nextTick(() => {
this.myScroll.refresh(); // DOM 结构发生变化后,重新初始化BScroll
});
this.myScroll.finishPullDown(); // 下拉刷新动作完成后调用此方法告诉BScroll完成一次下拉动作
});
this.myScroll.on("pullingUp", pos => {
console.log("上拉刷新!", pos);
this.$nextTick(() => {
this.myScroll.refresh(); // DOM 结构发生变化后,重新初始化BScroll
});
this.myScroll.finishPullUp(); // 上拉加载动作完成后调用此方法告诉BScroll完成一次上拉动作
});
});
// better-scroll 完毕
网友评论