上拉加载
pullUpLoad选项,用来配置上拉加载功能。当设置为 true 或者是一个 Object 的时候,可以开启上拉加载,可以配置离底部距离阈值(threshold)来决定开始加载的时机
this.scroll = new this.$BScroll(this.$refs.middleWrapper, {
click: true,
scrollY: true,
pullUpLoad: {
threshold: -30 // 当上拉距离超过30px时触发 pullingUp 事件
}
});
这里的 $BScroll 是我在main.js文件设置的:
import BScroll from 'better-scroll';
Vue.prototype.$BScroll = BScroll;
pullingUp事件:
this.scroll.on('pullingUp', () => {
.... // 做些事情
this.scroll.finishPullUp(); // 事情做完,需要调用此方法告诉 better-scroll 数据已加载,否则上拉事件只会执行一次
}
下拉刷新
pullDownRefresh选项,用来配置下拉刷新功能。当设置为 true 或者是一个 Object 的时候,开启下拉刷新,可以配置顶部下拉的距离(threshold)来决定刷新时机,以及回弹停留的距离(stop)
this.scroll = new BScroll(this.$refs.middleWrapper, {
click: true,
scrollY: true,
pullDownRefresh: {
threshold: 30, // 下拉距离超过30px触发pullingDown事件
stop: 20 // 回弹停留在距离顶部20px的位置
}
});
pullingDown事件
this.scroll.on('pullingDown', () => {
......
this.scroll.finishPullDown(); // 事情做完,需要调用此方法告诉 better-scroll 数据已加载,否则下拉事件只会执行一次
});