Vue2安装和使用better-scroll滚动插件

矫情吗；* 2024-03-31 08:00 40阅读 0赞

官方文档：[better-scroll: BetterScroll 是一款重点解决移动端各种滚动场景需求的开源插件，适用于滚动列表、选择器、轮播图、索引列表、开屏引导等应用场景 (gitee.com)][better-scroll_ BetterScroll _ _gitee.com]

## 安装 ##

NPM/CNPM

执行下述命令安装

npm install better-scroll --save
    cnpm install better-scroll --save

## 配置使用 ##

在代码中引入配置

//引入滚动插件
    import BetterScroll from "better-scroll";

mounted(){
        new BetterScroll('.wrapper', {
      movable: true,
      zoom: true
    })
      }

值得注意的是，要在有dom的时候执行这个插件，没有盒子不知道你要执行谁，在created生命周期中是有数据但是没节点的，需要在mounted生命周期下使用这个插件

better-scroll的核心是借鉴iscroll的，我们可以分析一下他的原理来确定一些注意点：

以我的这段代码为例，我想让section的内容滚动section作为最外面的盒子，它里面是一定要有一个子盒子的，滚动的时候必须要达成子盒子的大小是小于section的，这样才能滚动得起来

在配置里有一个class类wrapper，一定要把它给父元素，也就是我代码里的section加的

不止可以通过class类，还可以通过ref

this.$refs.wrapper
    //获取dom结点

mounted(){
        new BetterScroll(this.$refs.wrapper, {
      movable: true,
      zoom: true
    })
      }

这种方式也可以实现滚动，vue中的ref就是用来获取dom的

[better-scroll_ BetterScroll _ _gitee.com]: https://gitee.com/mirrors/better-scroll/

还没有评论，来说两句吧...