[JavaScript知识库]Better-Scroll

简介

1. Better-Scroll是一款专注于滚动的插件
2. 当在浏览器端，由于ta的加持，还算顺畅
3. 但在移动端，没有了浏览器，就会出现卡顿的现象
4. 此插件就是解决这个问题，让滚动流畅，带来极致享受

使用（vue）

安装：

npm install better-scroll --save

引入：

import BScroll from 'better-scroll'

使用：

<div ref='wrapper'><!--class名字可以随便起，用ta来包括滚动内容-->
  ...
</div>

<script>
 mounted() {
    this.$nextTick(() => {
	    const bscroll = new BScroll(this.$refs.wrapper, {
	      /**
	       * 默认情况下 BScroll 是不能监听滚动位置的
	       * 我们需要使用ta的一个属性 probeType
	       * 值为0或1不监测
	       * 值为2，开启监测，但监测不到手指离开的惯性滚动
	       * 值为3，监测任何滚动
	       */
	      probeType: 3,
	
	      /**
	       * BScroll包括的div标签默认是不能点击的
	       * 如果有需要，我们可以手动将 click 属性设为true
	       */
	      click: true,
	
	      /**
	       * 当你滚动到底部需要加载新的数据时，可以使用此属性
	       */
	      pullUpLoad: true
	    }) //传入标签、class或id定位到dom元素
	
	    // 监听加载请求
	    bscroll.on('pullingUp', () => {
	      console.log('加载代码...')
	      /**
	       * 加载完成后必须通知ta结束这次加载
	       * 才会执行下一次加载
	       */
	      bscroll.finishPullUp()
	    })
	
	    // 监听滚动
	    bscroll.on('scroll', {
	      // ...
	    })
  	}）
  }
</script>