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

林俊英
2023-12-01

官方文档: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 class="wrapper">
      <div>
        <Swiper></Swiper>
        <Icons></Icons>
        <Recommend></Recommend>
      </div>
    </section>

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

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

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

<section ref="wrapper">
      <div>
        <Swiper></Swiper>
        <Icons></Icons>
        <Recommend></Recommend>
      </div>
    </section>
this.$refs.wrapper
//获取dom结点
mounted(){
    new BetterScroll(this.$refs.wrapper, {
  movable: true,
  zoom: true
})
  }

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

 类似资料: