better-scroll体验

1. 安装

   npm install better-scroll --save

2. 初始化

   
     
     
   
       
   ...
       
   ...
       ...
     
     
   
   

   import BScroll from 'better-scroll'
   let scroll = new BScroll('.wrapper', {
       scrollY: true,
       click: true
   })
   

   可以滚动的前提：
   1、content要比wrapper高
   2、wrapper宽高值确定并且overflow: hidden

3. 配置属性

   1. probeType

      • 类型：Number
      • 默认值：0
      • 可选值：1、2、3
      • 作用：有时候我们需要知道滚动的位置。当 probeType 为 1 的时候，会非实时（屏幕滑动超过一定时间后）派发scroll 事件；当 probeType 为 2 的时候，会在屏幕滑动的过程中实时的派发 scroll 事件；当 probeType 为 3 的时候，不仅在屏幕滑动的过程中，而且在 momentum 滚动动画运行过程中实时派发 scroll 事件。如果没有设置该值，其默认值为 0，即不派发 scroll 事件

   2. scrollX
      当设置为 true 的时候，可以开启纵向滚动

   3. pullDownRefresh

   类型：Boolean | Object
   默认值：false
   作用：这个配置用于做下拉刷新功能，默认为 false。当设置为 true 或者是一个 Object 的时候，可以开启下拉刷新，
   可以配置顶部下拉的距离（threshold） 来决定刷新时机以及回弹停留的距离（stop）。当下拉刷新数据加载完毕后，需要执行 finishPullDown 方法。见 Demo 。 了解更多的细节可以去看 example 中的 scroll 组件代码。

   
       pullDownRefresh: {
         threshold: 50,
         stop: 20
       }
   

4. 事件属性/实例属性

   1. x
      scroll 横轴坐标（右偏移为+，左偏移为-）

   2. y
      scroll 纵轴坐标。（下偏移为+，上偏移为-）

   3. maxScrollY

   ​ 类型：Number

   ​ 作用：scroll 最大纵向滚动位置。(内容多的那部分高度)

   ​ 备注：scroll 纵向滚动的位置区间是 0 - maxScrollY，并且 maxScrollY 是负值

   上拉加载更多时会用到 ， 当 pos.y

5.方法
1.refresh()
> 更新数据后 重新计算 better-scroll，当 DOM 结构发生变化的时候务必要调用确保滚动的效果正常

2.scrollToElement(el, time, offsetX, offsetY, easing)

参数：
{DOM | String} el 滚动到的目标元素, 如果是字符串，则内部会尝试调用 querySelector 转换成 DOM 对象。
{Number} time 滚动动画执行的时长（单位 ms）
{Number | Boolean} offsetX 相对于目标元素的横轴偏移量，如果设置为 true，则滚到目标元素的中心位置
{Number | Boolean} offsetY 相对于目标元素的纵轴偏移量，如果设置为 true，则滚到目标元素的中心位置
{Object} easing 缓动函数，一般不建议修改，如果想修改，参考源码中的 ease.js 里的写法
返回值：无
作用：滚动到指定的目标元素。

3.**scrollTo(x, y, time, easing)**
 >参数：

{Number} x 横轴坐标（单位 px）
{Number} y 纵轴坐标（单位 px）
{Number} time 滚动动画执行的时长（单位 ms）
{Object} easing 缓动函数，一般不建议修改，如果想修改，参考源码中的 ease.js 里的写法
返回值：无
作用：滚动到指定的位置

4.**on(type, fn, context)**
 >参数：
{String} type 事件名

{Function} fn 回调函数
{context} 函数执行的上下文环境，默认是 this
返回值：无
作用：监听当前实例上的自定义事件。如：scroll, scrollEnd, pullingUp, pullingDown等。

import BScroll from 'better-scroll'
let scroll = new BScroll('.wrapper')
function onScroll(pos) {
  console.log(`Now position is x: ${pos.x}, y: ${pos.y}`)
}
scroll.on('scroll', onScroll)

**5.finishPullDown(config)**
 作用：当下拉刷新数据加载完毕后，需要调用此方法告诉 better-scroll 数据已加载。
**6.openPullDown(config)**
动态开启下拉刷新功能。

6.demo1

    

      
{{ pullDownMsg }}
      

          
{{ i }}
      
      
{{ pullUpMsg }}
    
  




`

7.demo2

this.getList().then((res) => {
        this.list = this.list.concat(res);
      });
      let listNode = this.$refs.wrap
      this.bsScroll = new BScroll(listNode, {
        probeType: 1,
        click: true,
        pullDownRefresh: true,
        pullUpLoad: true
      })
      this.bsScroll.on("pullingDown", () => {
        console.log("pullingDown")
        this.startNum = this.getRandom(1, 100);
        this.getList().then((res) => {
          this.list = res;
          this.pullDownMsg = "下拉刷新，发现更多";
          this.bsScroll.finishPullDown()
        })
      })
      this.bsScroll.on("pullingUp", () => {
        console.log("pullingUp")
        this.getList().then((res) => {
          this.list = this.list.concat(res);
          this.bsScroll.refresh()
          this.bsScroll.finishPullUp()
        })
      })