better-scroll使用参考

************better-scroll是基于父元素固定高度,溢出才滚动的,所以父元素务必定高,否则无法滚动*********************************************
*第一步引入
——————参考https://ustbhuangyi.github.io/better-scroll/#/examples/en
_____https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/property.html
——————CDN方式
https://unpkg.com/better-scroll/dist/bscroll.min.js
*第二步(记得加上dropDown变量)因为是基于touchEnd事件,所以不必需要scrollIndex(为了保证每次加载只执行一次数据的控制)
this.scroll = new BScroll('.addFriends',{
scrollY: true,
click: true
});
console.log(this.scroll.maxScrollY,'66');
this.scroll.on('scroll', (pos) => {
console.log(pos.y,this.dropDown)
//如果下拉超过50px 就显示下拉刷新的文字
if(pos.y>50){
this.dropDown = true
}else{
this.dropDown = false
}
})
//touchEnd(手指离开以后触发) 通过这个方法来监听下拉刷新
this.scroll.on('touchEnd', (pos) => {
// 下拉动作
if(pos.y > 50){
console.log("下拉刷新成功")
this.dropDown = false
}
//上拉加载 总高度>下拉的高度+10 触发加载更多
if(this.scroll.maxScrollY>pos.y+10){
console.log("加载更多");
// this.scrollIndex++;
// if(this.scrollIndex == 1){
this.loadNextPage();
// }
//使用refresh 方法 来更新scroll 解决无法滚动的问题
this.scroll.refresh()
}
console.log(this.scroll.maxScrollY+"总距离----下拉的距离"+pos.y)
})
原文地址:https://www.cnblogs.com/holy-amy/p/10009059.html