首先要注意咱们的scroll要放在子元素当中,子元素要比父元素大才能够滚动
抽象一个scroll的基础组件,步骤
1.import better-scroll
2.父元素设置ref
3.在这个基础组建里设置slot,这样子方便父组件的使用和渲染dom
4.子组件scroll里书写props提供给父组件
better-scroll有不少具体的方法
能够经过去看better-scroll的官方文档来了解更全面
5.写一个初始化scroll的方法,写在mounted和methods里面,保证只有父组件被调用的时候才使用这个组建,否则一开始会报错,注意因为使用了mounted因此要在你想要使用scoll组建的那个组件内部添加data监听,否则mounted一开始出来是什么都没有的也滚动不了
渲染完毕,data监听到,就会调用refresh方法
6.methods里要写上props里对应的方法
关于子组件props的例子
7.加enable和disable的方法用&&来控制
8.refresh方法
9.watch:
watch data
大概的scroll轮廓就出来了dom
props: { probeType: { type: Number, default: 1 }, click: { type: Boolean, default: false }, listenScroll: { type: Boolean, default: false }, data: { type: Array, default: null }, pullup: { type: Boolean, default: false }, beforeScroll: { type: Boolean, default: false }, refreshDelay: { type: Number, default: 20 }, direction: { type: String, default: DIRECTION_V } },