Vue + better-scroll 入门教程

这几天研究项目时，看到了 better-scroll 插件，看着感觉功能挺强，据称是目前最完善的滚动插件，也就结合着Vue框架学习了起来，自己上手练习总会遇到 better-scroll 已经初始化了， 但是没法滚动的情况，回过头看 better-scroll 的官方文档，找不到答案。感觉其文档还是过于简单， 很多需要举例明确说明的概念都没有讲清楚，和 Vue 的官方文档相比，确实存在着不小的差距。当然，这里不是说 better-scroll 插件做的不够好，只是文档有点简略了，对新手不太友好。

大家可能已经看过 better-scroll 的官方文档，下面的这张图片引自官网，其中 wrapper (绿色的)为父元素，它会有固定的高度，content (黄色的)是父容器的第一个子元素，它的高度会随着内容的大小而撑高。一旦 content 的高度超过了父容器的高度，我们就可以实现滚动了，这就是 better-scroll 的滚动原理。

 

本篇教程结合代码实例，主要针对新手常见的 better-scroll 已经初始化，但依然无法滚动的问题，主要以下有 2 点原因，会结合着实例给大家讲解：

1、better-scroll 只处理容器（wrapper）的第一个子元素（content）的滚动，其它的元素都会被忽略。

2、父元素需要有固定的高度，否则无法滚动。

一、使用方法：

1. 安装：

npm install better-scroll

2. 初始化：（两种都可以）

mounted() {
  setTimeout( ()=> {
     this.scroll = new BScroll(this.$refs.wrapper, {})
   }, 20)
},

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

这里的 this.$nextTick 和 setTimeout(fn,  20) 都是可以的（20 ms 是一个经验值，每一个 Tick 约为 17 ms），对用户体验而言都是无感知的。

3.  重点：

better-scroll 初始化是针对父容器的第一个子元素。  例如：

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

我们进行初始化：

let scroll = new BScroll('.wrapper', {})

此时，.content1 中的内容可以实现滚动，而 .content2 中的内容是不会实现滚动效果的。

也许你会觉得这里很容易理解，不过在实际的项目中，我们可能会遇到无法滚动的情况，其中的问题很有可能出在这里，比如：

<div class="wrapper">
  <section v-for="(value, key) in cities" >
    <p class="title">{{key}}</p>
    <div class="city-box" v-for="item in value">
      <p class="city-name">{{item.name}}</p>
    </div>
  </section>
</div>

其中的 cities 如下，也就是一个简单的嵌套循环。

cities: {
  "A": [{"name": "阿坝"},{"name": "阿克苏"}, {"name": "阿拉善盟"}, {"name": "阿勒泰"}], 
  "B": [{"name": "北京"}, {"name": "白城"}, {"name": "百色"}, {"name": "白山"}],
  "C": [{"name": "重庆"}, {"name": "常州"}, {"name": "成都"}, {"name": "沧州"}, {"name": "常德"}],
}

此时对 .wrapper 进行初始化：

let scroll = new BScroll('.wrapper', {})

你会发现页面依然无法滚动，但是.wrapper是父容器， <section></section> 是其第一个子元素，理论上 <section></section> 中的内容应该可以实现滚动效果才对，那么原因在哪里呢？

这里的问题实际就是出在嵌套循环上，可以看到，由于 v-for 的存在，实际上页面是渲染出了三个 <section></section> ,而 better-scroll 只会对第一个 <section></section> 中的内容实现滚动，当第一个 <section></section> 中的内容高度小于父容器的高度时，页面是不会滚动的，由此可以解决上述问题，可以在 <section></section> 的外层再加一个 <div></duv> ,将三个 <section></section> 都包裹起来即可。

二、将 better-scroll 封装成 Vue 组件

1.  新建 BScroll.vue ( 位于：@/components/ ):

<template>
  <!--滚动组件-->
  <div class="content-scroll" ref="scrollRef">
    <slot></slot>
  </div>
</template>

<script>
  import BScroll from 'better-scroll'
  
  export default {
    mounted() {
      // 确保在 Dom 初始化后才执行滚动方法
      setTimeout(() => {
        this._initScroll();
      }, 20)
    },
    methods: {
      _initScroll() {
        if(!this.$refs.scrollRef) return ;
        this.scroll = new BScroll(this.$refs.scrollRef, {});
      },
    },
  }
</script>

2. 在父组件中引用，我们将父组件命名为 CityList.vue (位于：@/views 文件夹下)，我们模拟一些城市的名称，将其显示出来：

<template>
  <div class="wrapper" ref="wrapper">
    <bet-scroll class="content-scroll">  <!-- 引用上一步封装的better-scroll组件 -->
      <div>
        <p v-for="item in cities" :key="item.id" class="city-name">
          {{item.name}}
        </p>
      </div>
    </bet-scroll>
  </div>
</template>

<script>
  import BScroll from '@/components/BScroll.vue';

  export default {
    components: { BetScroll: BScroll },
    data() {
      return {
        probeType: 3,
        listenScroll: true,
        cities: [
          {"id": 1,"name": "北京"},
          {"id": 3,"name": "上海"},
          {"id": 47,"name": "杭州"},
          ...
        ]
      }
    },
  }
</script>

<style>
  .city-name{
    height: 30px;
    border-bottom: 1px solid #f2f2f2;
    line-height: 20px;
  }
</style>

此时，我们将页面运行出来，如下：

结果页面依然无法滚动！ 根据滚动原理，必须给 .content-scroll 添加固定的高度。

添加以下 CSS ：

.content-scroll{
  height: 300px;
  overflow: hidden;
}

此时，我们发现页面已经可以滚动，达到了我们想要的效果！

若文章中有不正确的地方，欢迎大家交流指正。

原创不易，若文章帮助到您，您也可以打赏，请俺喝个咖啡哦~