在移动端开发中,滚动条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); });