vue之better-scroll插件快速上手及实战demo

朱雀 2023-07-10 15:36 86阅读 0赞

## 什么是Better-Scroll ##

better-scroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。它是基于iscroll开发实现的，它的所有API基本都兼容iscroll，且作出扩展。详细的介绍可以阅读官方文档：[https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/\#][https_ustbhuangyi.github.io_better-scroll_doc_zh-hans]  
那既然一样使用于滚动场景，better-scroll 和 iscroll 又有什么区别呢？简单总结一下：  
1.iscroll 的动画是基于js，靠帧动画实现，体验感不咋地；better-scroll 是基于css3动画。  
2.iscroll 已经多年无人维护，旧bug也一直搁置。  
3.better-scroll 功能没有 iscroll 多，但也足够正常开发需求，有待大家共同扩展。

## 安装初始化 ##

better-scroll使用很简单，它托管在npm中，可npm在项目中直接下载安装：

npm install better-scroll --save

然后是引入。可以 node\_modules 引入，其实也就是es6写法：

import BScroll from 'better-scroll'

也可以是es5写法：

var BScroll = require('better-scroll')

不过我的博客里依旧推荐大家习惯es6写法，因为它确实进步和潮流。最后就是初始化了：

let wrapper = document.querySelector('.wrapper') //获取scroll元素
    let scroll = new BScroll(wrapper)  //初始化better-scroll实例

能学到这的朋友以上应该能看懂吧，如果有不懂的地方应该自行补一下js语法了。现在，既然我们讲的是 better-scroll 在vue项目中的应用，那肯定和原生应用有点不同之处吧。vue给我们提供了一个自带的属性：`$ref`。简单说，它是一个经常用来获取元素的属性，其实你大可把它看做 js 或 jq 中获取 dom 节点的手段。所以vue项目中 better-scroll 的初始化可以这样：

<div ref="wrapper">滚动内容</div>
    //...
    this.scroll = new Bscroll(this.$refs.wrapper)

到这里我想啰嗦一句，原生应用 better-scroll 大家都会随便在`script`标签内找地方初始化一下，那在vue项目中什么时候初始化比较合适和严谨？我建议是在mounted生命周期函数里进行初始化，确保所有数据已经挂载完成又第一时间进行初始化：

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

## 滚动原理 ##

有人会有问题：我的一切都ok了怎么不会滚动？那得先明白 better-scroll 滚动原理。**通常，文档流在可视窗口约束下，若超出了窗口宽高，则会相应的出现x轴、y轴滚动条。那这很明显，better-scroll同理，如果初始化元素足够大容纳你的内容或者它压根就没有超出可视窗口，那哪里来的会滚动呢？** 我这里是通俗的语言解释，官网上有原理图更加直观可以进一步理解。  
还有一点需要注意，**better-scroll实例化只应用于该指定容器元素下的第一个子元素，其余元素不具备滚动功能，所以我们要在该容器元素下套多一个div用于包裹所有需要滚动的模块**，可以仔细看看下面实战demo的嵌套逻辑。其实在特殊场景我们都要养成习惯多用一个div包裹住内容的代码书写习惯。

## 实战demo ##

<template>
        <div class="cityList" ref="wrapper">
            <div>
                <div class="area">
                    //数据内容Part-one
                </div>
                <div class="area">
                    //数据内容Part-two
                </div>
                <div class="area" v-for="(item,key) of cities" :key="key" :ref="key">
                    //数据内容Part-three
                </div>
            </div>
        </div>
    </template>
    
    <script>
    import Bscroll from 'better-scroll'
    import {  mapState } from 'vuex'
    export default { 
        name:"cityList",
        //...数据内容逻辑代码
        mounted(){ 
            this.scroll = new Bscroll(this.$refs.wrapper)
        }
    }
    </script>
    
    <style lang="stylus" scoped>
    //...页面样式代码
    </style>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N4aml0_size_16_color_FFFFFF_t_70]  
上面是我个人在vue练习项目中一个城市列表页面，应用了better-scroll实现区域滚动功能。具体的数据、逻辑、样式代码没有给出浪费空间，需要完整的cityList.vue组件代码可下载资源研究。

[https_ustbhuangyi.github.io_better-scroll_doc_zh-hans]: https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/#
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N4aml0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200303165419194.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N4aml0,size_16,color_FFFFFF,t_70