better-scroll使用参考

Posted 2021-01-22 holy-amy

************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)
})