<template>
<div class="test">
<div class="loading-top" v-show="topshow">
<div class="weui-loadmore">
<i class="weui-loading"></i>
<span class="weui-loadmore__tips">正在加载</span>
</div>
</div>
<div class="wrapper" ref="wrapper" :class="{'list-top': topshow}">
<div class="content">
<ul>
<li>11</li>
<li>22</li>
<li>33</li>
<li>44</li>
<li>55</li>
<li>66</li>
<li>77</li>
<li>88</li>
<li>99</li>
</ul>
</div>
</div>
</div>
</template>
<script>
import BSscroll from 'better-scroll';
export default {
name: "TestContent",
data() {
return {
topshow: false
}
},
mounted() {
this.$nextTick(() => {
//$refs绑定元素
if (!this.scroll) {
this.scroll = new BSscroll(this.$refs.wrapper, {
//开启点击事件, 默认为fasle
click: true,
scrollY: true,
pullUpLoad: {
threshold: -30, // 当上拉距离超过30px时触发 pullingUp 事件
},
pullDownRefresh: {
threshold: 30, // 下拉距离超过30px触发pullingDown事件
stop: 20 // 回弹停留在距离顶部20px的位置
}
})
//上滑加载
this.scroll.on('pullingUp', () => {
console.log('pullingUp');
this.scroll.finishPullUp(); // 事情做完,需要调用此方法告诉 better-scroll 数据已加载,否则上拉事件只会执行一次
})
//下拉刷新
this.scroll.on('pullingDown', () => {
console.log('pullingDown');
this.topshow = true;
setTimeout(() => {
this.topshow = false;
}, 2000);
this.scroll.finishPullDown(); // 事情做完,需要调用此方法告诉 better-scroll 数据已加载,否则下拉事件只会执行一次
});
} else if (!this.$refs.wrapper) {
return
} else {
this.scroll.refresh()
}
})
}
};
</script>
<style lang="stylus" scoped>
.test
clear: both
.wrapper
width: 100%
position: absolute
top: 45px
bottom: 50px
overflow: hidden
z-index: 1
li
line-height: 70px
text-align: center
background: orange
margin: 10px 0
.loading-top
position: absolute
top: 20px
height: 20px
width: 100%
.list-top
top: 80px !important
</style>
better-sroll 下拉刷新,下拉加载vue.js参考代码
猜你喜欢
转载自blog.csdn.net/codipy/article/details/103612845
今日推荐
周排行