better-scroll 插件 在mac上使用的注意点---持续更新中

一、下载和引入

这玩意升级到2.x后有2种下载版本。一个是带插件的完整版（推荐）。一个是不到插件的。
不同版本的安装和使用方式都不一样，完整版更方便
完整版安装命令：npm install better-scroll --save
官网写的很清楚。更多版本的安装可去查看
官方网站

二、基本的使用

1. 引入
2. 初始化
   如果子啊vue组件里使用，需要在vue实例的mounted函数里定义初始化内容，并赋值给一个变量。

 this.scroll = new bs(this.$refs.wrapper, {
      click: true,
      probeType: 3, //监听位置，1 表示不监听   2 表示只监听鼠标在页面时候  3 表示任何滑动的时候
      pullUpLoad: true, //上拉加载更多
    })

3. 监听函数

this.bs.on(''xxx'' ,function(){})

4. 使用格式问题
   这个官网有图，wrapper里面要有一个content包裹真实数据

import BScroll from 'better-scroll'  //引入

let bs = new BScroll('.wrapper', {
  pullUpLoad: true, //允许下拉到底部的监听
  probetypeL:1,//默认是0不监听，1表示不监听、2表示只监听手指触摸时  3表示监听所有滑动
  scrollbar: true,
  // and so on
})

bs.on('scroll',(position)=>{
		console.log(position)//页面的位置
)

三、实现的功能

1、实现回到顶部

 totop() {
      // scroll.scrollTo(x,y[时间 ms,behavior])
      // behavior的取值： smooth(平滑滚动),instant(瞬间滚动),默认值auto,实测效果等同于instant
      // 时间 毫秒
      this.scroll.scrollTo(0, 0, 1000)
    },

2、实现下拉加载更多

//mounted里面
	// 实现功能：0、监听pullingUp事件
    // 1、当拉到底部的时候，通过emit通知home 并调用加载更多的方法
    // 2、数据加载完后，调用scroll.finishPullUp()
    this.scroll.on('pullingUp', () => {
      console.log('scroll pull up')
      this.$emit('loadMore')
    })
    -----------------------------
 //   methods：里面
	// 实现一个页面多次上拉加载更多
    finishpullup() {
      this.scroll.finishPullUp()
    },

四、遇到的问题

1、better-scroll mac的触控板上无法双指滑动滚动

解决办法：
1、首先在浏览器上切换一下手机型号
2、只能拖拽滚动，不能双指滑动。即只能单个手指按住触摸板，然后上下滑动。
「气死我了找了半天的原因。偶然试出来的。」

2、当better-scroll封装成一个实例并用到了vue项目中后由于此组件结构的特殊性，会给项目带来一些样式上的影响。需要调节，很烦。