better-scroll在vue中的基本使用

[TOC]

better-scroll是什么?

BetterScroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。它的核心是借鉴的 iscroll 的实现，它的 API 设计基本兼容 iscroll，在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。
BetterScroll 是使用纯 JavaScript 实现的，这意味着它是无依赖的。

Better-scroll的安装与使用

全能力下载与安装命令 cnpm install better-scroll --save
使用与导入:
- 全能力导入 import BScroll from "better-scroll"
- 使用: new BScroll("挂载的元素",配置对象)
注意事项:
- 想要实现better-scroll的滑动,必须要有一个固定高度的父元素,且子元素的高度高于父元素才能使用滑动,且滑动只对挂载元素的第一个子元素生效

Better-scroll在Vue中的基本使用

better-scroll 的初始化时机很重要，因为它在初始化的时候，会计算父元素和子元素的高度和宽度，来决定是否可以纵向和横向滚动。因此，我们在初始化它的时候，必须确保父元素和子元素的内容已经正确渲染了。如果子元素或者父元素 DOM 结构发生改变的时候，必须重新调用 scroll.refresh() 方法重新计算来确保滚动效果的正常。

Vue.js 提供了我们一个获取 DOM 对象的接口—— vm.$refs。在这里，我们通过了 this.$refs.元素 访问到了这个 DOM 对象，并且我们在 mounted 这个钩子函数里，this.$nextTick 的回调函数中初始化 better-scroll 。因为这个时候，wrapper 的 DOM 已经渲染了，我们可以正确计算它以及它内层 content 的高度，以确保滚动正常。
在Vue中使用时,应该对better-scroll进行封装,然后再使用,如果不封装,单个组件对它就会产生很大的依赖,对性能,和代码的维护带来很不好的效果,所以将它封装成一个公共vue的组件,需要使用时,将vue组件导入即可

如何在vue中使用:

创建一个组件,以组件的方式使用better-scroll,这样更便于后期维护
在vue的生命周期 mounted 的 this.$nextTick 中创建 BScroll 对象
挂载元素时,必须使用 ref来标识一个元素进行挂载 , new Bscroll(this.$refs.元素,{配置对象})

实现滚动, 必须给挂载的元素一个固定高度, 并且内容的高度大于挂载元素的高度才能滚动

<template>
  <div ref="scroll">
    <div ref="center">
      <slot></slot>
    </div>
  </div>
</template>
  
<script>
//全能力导入beter-scroll  
import BScroll from "better-scroll";

export default {
  name: "scroll",
  data() {
    return {
      scroll: null,
    };
  },
  mounted() {
    this.$nextTick(() => {
      //初始化BScroll对象
      this.initBScroll();
    });
  },
  methods: {
    // 创建 BScroll 对象
    initBScroll() {
      this.scroll = new BScroll(this.$refs.scroll, {
        observeDOM: true, //开启侦测Dom变化  当dom发生变化,从新计算可滑动高度
        pullUpLoad: true, //开启上拉加载
      });
      //监听上拉加载事件
      this.scroll.on("pullingUp", this.add);
    },
    //上拉加载事件函数
    add() {
      setTimeout(() => {
        this.scroll.finishPullUp()
      }, 3000);
    },
  }
};
</script>

better-scroll滑动异常问题

在使用better-scroll的时候,会经常遇到视图更新导致的滑动异常问题!导致该问题的原因在于,视图更新时,可滑动的高度或者宽带也会随着更新,但是beter-scrol并没有随着视图的更新去更新可滑动的高度

解决方案一:
- 在视图更新后,手动去调用better-scroll.refresh()重新去计算视图更新后的可滑动高度
解决方案二:
- 使用beter-scroll提供的 observe-dom插件, 开启对滑动区域 DOM 改变的探测 , 滑动里面的 dom 元素发生时，将会触发 scroll 的 refresh 方法,从新计算可滑动高度

在实际的使用中发现,使用单一的方案并无法完美解决滑动异常的问题,任然会有一些神经质的问题导致滑动异常,所有我们要结合两种方法一起使用,确保滑动正常

//1.使用 observe-dom 插件 侦测dom元素的改变
new BScroll(挂载元素, {
observeDOM: true, //开启 observe-dom 插件 当dom发生变化,从新计算可滑动高度
}) 

//2.Vue的钩子函数,数据更新后,dom已经更新
  updated() {
    //数据更新后,从新获取可滑动高度
    this.$nextTick(() => {
      //多加300毫秒,确保视图已经真正渲染完成,因为newxTick也无法保证视图已经全部渲染完成
      setTimeout(() => {
        //调用better-scroll.refesh方法,重新计算可滑动高度
        this.scroll.refresh();
      }, 300);
    });
  },

以上内容就是better-scroll在vue中的基本使用,更多内容,请移步至better-scroll官网 better-scroll.gitee.io/docs/zh-CN/ 或者better-scroll作者写的当 better-scroll 遇见 Vue