better-scroll

better-scroll插件使用起来挺简单的，但是有几个需要注意的小tips，很容易忘，这里总结一下方便查阅回顾

better-scroll可以很方便的实现点击回到顶部、上拉加载更多等功能 还有几个关键属性和事件，需要整体有个框架

属性：

mounted() {
    this.scroll =  new BScroll('.wrapper', {
      // probeType:this.probeType,
      // // click: true,
      // 上拉加载，默认为false
      pullUpLoad:this.pullUpLoad,
      // 下拉刷新，默认为false
      pullDownRefresh: {
        threshold: 50,// 配置顶部下拉的距离,决定刷新时机
        
        probeType: 3
      },
    })
}

probeType：可选值：1、2、3。监听滚动的位置。 pullUpLoad： Bolean。如果需要监听滚动底部事件，设置为true。 pullDownRefresh

事件：

this.scroll.on('scroll',(position)=>{
  // 将监听的数据坐标发射出去，父组件用来接收处理
  this.$emit('scroll',position)
})
// 监听上拉事件，当滚动到底部时调用—实现加载更多
this.scroll.on('pullingUp',()=>{
  console.log("底部到了")
  this.$emit('pullingUp')
})

Tips

1. 在mounted钩子函数中创建Scroll对象。需要使用refs是取不到的
2. 注意css写法，只需要限定父盒子的大小，再设置overflow:hidden隐藏超出的内容即可 ps.其他.父组件和子组件的name相同，导致报错RangeError: Maximum call stack size exceeded