局部滚动,scroll组件的实现

首先要注意咱们的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
      }
    },
相关文章
相关标签/搜索