插件//better-scroll（BScroll/滚动插件）使用方法及其在 vue 中使用

一、BScroll

BScroll是什么

better-scroll，受iscroll启发，它支持更多功能并具有更好的滚动性能
github上的插件原地址
BetterScroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。它的核心是借鉴的 iscroll 的实现，它的 API 设计基本兼容 iscroll，在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。

BetterScroll 是使用纯 JavaScript 实现的，这意味着它是无依赖的。

滚动原理

content 高度 > 父容器高度，即可滚动。

安装

npm install better-scroll -S  # 安装带有所有插件的 BetterScroll

npm install @better-scroll/core # 核心滚动，大部分情况可能只需要一个简单的滚动

import BetterScroll from 'better-scroll'

let bs = new BetterScroll('.wrapper', {
    
    
  movable: true,
  zoom: true
})

import BScroll from '@better-scroll/core'
let bs = new BScroll('.wrapper', {
    
    })

起步

<div class="wrapper">
  <ul class="content">
    <li>...</li>
    <li>...</li>
    ...
  </ul>
  <!-- 这里可以放一些其它的 DOM，但不会影响滚动 -->
</div>

二、BScroll 在 vue 中的使用

通过 this.$refs.wrapper访问到DOM对象在monuted钩子函数里，this.$nextTick 的回调函数中初始化 better-scroll
（this.$nextTick 是一个异步函数，确保 DOM 已经渲染）

<template>
  <div class="wrapper" ref="wrapper">
    <ul class="content">
      <li>...</li>
      <li>...</li>
      ...
    </ul>
  </div>
</template>
<script>
  import BScroll from 'better-scroll'
  export default {
    
    
    mounted() {
    
    
      this.$nextTick(() => {
    
    
        this.scroll = new Bscroll(this.$refs.wrapper, {
    
    })
      })
    }
  }
</script>

异步数据的处理

列表的数据往往是异步获取的，因此初始化 better-scroll 的时机需要在数据获取后

<template>
	<div class="wrapper" ref="wrapper">
		<ul>
			<li v-for="item in data">{
    
    {
    
    item}}</li>
		</ul>
	</div>
</template>

<script>
	import BScroll from 'better-scroll'
	export default {
    
    
		data() {
    
    
			return {
    
    
				data: []
			}
		},
		created() {
    
    
			requestData().then((res) => {
    
    
				this.data = res.data
				this.$nextTick(() => {
    
    
					this.scroll = new Bscroll(this.$refs.wrapper, {
    
    })
				})
			}) 
		}
	}
</script>

这里的 requestData 是伪代码，作用就是发起一个 http 请求从服务端获取数据，并且这个函数返回的是一个 promise（实际项目中我们可能会用 axios 或者 vue-resource）。我们获取到数据的后，需要通过异步的方式再去初始化 better-scroll，因为 Vue 是数据驱动的， Vue 数据发生变化（this.data = res.data）到页面重新渲染是一个异步的过程，我们的初始化时机是要在 DOM 重新渲染后，所以这里用到了 this.$nextTick，当然替换成 setTimeout(fn, 20) 也是可以的。

为什么这里在 created 这个钩子函数里请求数据而不是放到 mounted 的钩子函数里？因为 requestData 是发送一个网络请求，这是一个异步过程，当拿到响应数据的时候，Vue 的 DOM 早就已经渲染好了，但是数据改变 —> DOM 重新渲染仍然是一个异步过程，所以即使在我们拿到数据后，也要异步初始化 better-scroll。