vue项目中better-scroll的简单使用

102 阅读1分钟

在移动端开发中,滚动条better-scroll是非常日常的需求,以下简单介绍better-scroll的使用步骤:

安装

npm install @better-scroll/core --save

引入

在所需页面import BetterScroll from "better-scroll";

准备容器

通常需要父子容器: 其中子容器要比父容器所占区域大(所以才能滚动),在script中: data () { return { isShow:true, BScroll:'', } }, 并且使用nextTick确保页面dom已经渲染之后再实现滚动条,确保滚动条正常 this.$nextTick(() => { //左侧滑动 new BetterScroll(this.$refs.left); //右侧滑动 new BetterScroll(this.$refs.right); });