better-scroll在vue中的应用

在我们日常的移动端项目开发中，处理滚动列表是再常见不过的需求了，以滴滴为例，可以是这样竖向滚动的列表，如图所示：

微信 —> 钱包—>滴滴出行”体验效果。

什么是 better-scroll better-scroll 是一个移动端滚动的解决方案，它是基于 iscroll 的重写，它和 iscroll 的主要区别在这里。better-scroll 也很强大，不仅可以做普通的滚动列表，还可以做轮播图、picker 等等。

不少同学可能用过 better-scroll，我收到反馈最多的问题是：

不能滚动是现象，我们得搞清楚这其中的根本原因。在这之前，我们先来看一下浏览器的滚动原理：

那么对于 better-scroll 也是一样的道理，我们先来看一下 better-scroll 常见的 html 结构：

<div class="wrapper">

  <ul class="content">

    <li>...</li>

    <li>...</li>

    ...

  </ul>

</div>

为了更加直观，我们再来看一张图：

固定的高度。黄色部分为 content，它是父容器的第一个子元素，它的高度会随着内容的大小而撑高。那么，当 content 的高度不超过父容器的高度，是不能滚动的，而它一旦超过了父容器的高度，我们就可以滚动内容区了，这就是 better-scroll 的滚动原理。

import BScroll from 'better-scroll' let wrapper = document.querySelector('.wrapper') let scroll = new BScroll(wrapper, {})

better-scroll 的文档。

scroll.refresh() 方法重新计算来确保滚动效果的正常。所以同学们反馈的 better-scroll 不能滚动的原因多半是初始化 better-scroll 的时机不对，或者是当 DOM 结构发送变化的时候并没有重新计算 better-scroll 。

Vue.js 都不陌生，当 better-scroll 遇见 Vue，会擦出怎样的火花呢？

很多同学开始接触使用 better-scroll 都是受到了我的一门教学课程—— 《Vue.js高仿饿了么外卖App》的影响。在那门课程中，我们把 better-scroll 和 Vue 做了结合，实现了很多列表滚动的效果。在 Vue 中的使用方法如下：

<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>

js 提供了我们一个获取 DOM 对象的接口—— vm.$refs 。在这里，我们通过了 this.$refs.wrapper 访问到了这个 DOM 对象，并且我们在 mounted 这个钩子函数里， this.$nextTick 的回调函数中初始化 better-scroll 。因为这个时候，wrapper 的 DOM 已经渲染了，我们可以正确计算它以及它内层 content 的高度，以确保滚动正常。

this.$nextTick 是一个异步函数，为了确保 DOM 已经渲染，感兴趣的同学可以了解一下它的内部实现细节，底层用到了 MutationObserver 或者是 setTimeout(fn, 0) 。其实我们在这里把 this.$nextTick 替换成 setTimeout(fn, 20) 也是可以的（20 ms 是一个经验值，每一个 Tick 约为 17 ms），对用户体验而言都是无感知的。

在我们的实际工作中，列表的数据往往都是异步获取的，因此我们初始化 better-scroll 的时机需要在数据获取后，代码如下：

<template>

  <div class="wrapper" ref="wrapper">

    <ul class="content">

      <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>

axios 或者 vue-resource ）。我们获取到数据的后，需要通过异步的方式再去初始化 better-scroll，因为 Vue 是数据驱动的， Vue 数据发生变化（ this.data = res.data ）到页面重新渲染是一个异步的过程，我们的初始化时机是要在 DOM 重新渲染后，所以这里用到了 this.$nextTick ，当然替换成 setTimeout(fn, 20) 也是可以的。

数据改变 —> DOM 重新渲染仍然是一个异步过程，所以即使在我们拿到数据后，也要异步初始化 better-scroll。

我们在实际开发中，除了数据异步获取，还有一些场景可以动态更新列表中的数据，比如常见的下拉加载，上拉刷新等。比如我们用 better-scroll 配合 Vue 实现下拉加载功能，代码如下：

<template>

  <div class="wrapper" ref="wrapper">

    <ul class="content">

      <li v-for="item in data">{{item}}</li>

    </ul>

    <div class="loading-wrapper"></div>

  </div>

</template>

<script>

  import BScroll from 'better-scroll'

  export default {

    data() {

      return {

        data: []

      }

    },

    created() {

      this.loadData()

    },

    methods: {

      loadData() {

        requestData().then((res) => {

          this.data = res.data.concat(this.data)

          this.$nextTick(() => {

            if (!this.scroll) {

              this.scroll = new Bscroll(this.$refs.wrapper, {})

              this.scroll.on('touchend', (pos) => {

                // 下拉动作

                if (pos.y > 50) {

                  this.loadData()

                }

              })

            } else {

              this.scroll.refresh()

            }

          })

        })

      }

    }

  }

</script>

这段代码比之前稍微复杂一些, 当我们在滑动列表松开手指时候， better-scroll 会对外派发一个 touchend 事件，我们监听了这个事件，并且判断了 pos.y > 50（我们把这个行为定义成一次下拉的动作）。如果是下拉的话我们会重新请求数据，并且把新的数据和之前的 data 做一次 concat，也就更新了列表的数据，那么数据的改变就会映射到 DOM 的变化。需要注意的一点，这里我们对 this.scroll 做了判断，如果没有初始化过我们会通过 new BScroll 初始化，并且绑定一些事件，否则我们会调用 this.scroll.refresh 方法重新计算，来确保滚动效果的正常。

scroll 组件的抽象和封装因此，我们有强烈的需求抽象出来一个 scroll 组件，类似小程序的 scroll-view 组件，方便开发者的使用。

有了这一层 scroll 组件的封装，我们来修改刚刚最复杂的代码（假设我们已经全局注册了 scroll 组件）。

<template>

  <scroll class="wrapper"

          :data="data"

          :pulldown="pulldown"

          @pulldown="loadData">

    <ul class="content">

      <li v-for="item in data">{{item}}</li>

    </ul>

    <div class="loading-wrapper"></div>

  </scroll>

</template>

<script>

  import BScroll from 'better-scroll'

  export default {

    data() {

      return {

        data: [],

        pulldown: true

      }

    },

    created() {

      this.loadData()

    },

    methods: {

      loadData() {

        requestData().then((res) => {

          this.data = res.data.concat(this.data)

        })

      }

    }

  }

</script>

插件 Vue 化引发的一些思考这篇文章我不仅仅是要教会大家封装一个 scroll 组件，还想传递一些把第三方插件（原生 JS 实现）Vue 化的思考过程。很多学习 Vue.js 的同学可能还停留在 “XX 效果如何用 Vue.js 实现” 的程度，其实把插件 Vue 化有两点很关键，一个是对插件本身的实现原理很了解，另一个是对 Vue.js 的特性很了解。对插件本身的实现原理了解需要的是一个思考和钻研的过程，这个过程可能困难，但是收获也是巨大的；而对 Vue.js 的特性的了解，是需要大家对 Vue.js 多多使用，学会从平时的项目中积累和总结，也要善于查阅 Vue.js 的官方文档，关注一些 Vue.js 的升级等。

所以，我们拒绝伸手党，但也不是鼓励大家什么时候都要去造轮子，当我们在使用一些现成插件的同时，也希望大家能多多思考，去探索一下现象背后的本质，把 “XX 效果如何用 Vue.js 实现” 这句话从问号变成句号。