局部滚动,scroll组件的实现

首先要注意我们的scroll要放在子元素当中,子元素要比父元素大才可以滚动
抽象一个scroll的基础组件,因为scroll随处可用的基础类方法组件我们应该要把它抽象为一个子组件,这样子就可以让不同的父组件对他们进行调用
步骤
1.import better-scroll
2.父元素设置ref,其实就是slot插槽外部包裹的父元素设置一个ref,方便之后方法调用
3.在这个基础组建(所谓的子组件)里设置slot,这样子方便父组件的使用和渲染dom
4.子组件scroll里书写props提供给父组件
better-scroll有很多具体的方法
可以通过去看better-scroll的官方文档来了解更全面
5.子组件写一个初始化scroll的方法,写在mounted和methods里面
6.需要使用这个scroll子组件的父组件要绑定一个watch监听,保证只有父组件调用它的时候才使用这个组建,不然一开始会报错,因为如果父组件没有调用它相当于我们的高度没有产生变化到需要使用scroll这个组件,会使得scroll这个子组件进行报错;所以要在你想要使用scoll组建的那个父组件内部使用scroll位置的那个标签上添加data监听
渲染完毕,data监听到,就会调用子组件里refresh方法

比如我们要在这个父组件的这个位置使用scroll


6.子组件里methods里要写上props里对应的方法
7.在子组件methods里加enable和disable的方法用&&来控制是否要scroll
8.refresh方法
9.watch:
watch data,watch我们父组件标签里绑定的监听数据data,好使得我们的scroll只有在父组件调用的时候才被使用,可以有效防止报错
大概的scroll轮廓就出来了

子组件的一个大概的例子,可以参照这个写:

 props: {//props里的跟多要求可以参考better-scroll官方文档
      probeType: {
        type: Number,
        default: 1
      },
      click: {
        type: Boolean,
        default: false
      }
      data: {
        type: Array,
        default: null
      },
      refreshDelay: {
        type: Number,
        default: 20
      },
      direction: {
        type: String,
        default: DIRECTION_V
      }
    },    
     mounted() {
      setTimeout(() => {
        this._initScroll()
      }, 20)
    },//所谓的初始化scroll
     methods: {
      _initScroll() {
        if (!this.$refs.绑定scroll的父元素) {
          return
        }
        this.scroll = new BScroll(this.$refs.scroll的父元素名字自己起,{
          probeType: this.probeType,
          click: this.click,
          eventPassthrough: this.direction === DIRECTION_V ? DIRECTION_H : DIRECTION_V
        })

   

        if (this.pullup) {
          this.scroll.on('scrollEnd', () => {
            if (this.scroll.y <= (this.scroll.maxScrollY + 50)) {
              this.$emit('scrollToEnd')
            }
          })
        },
      disable() {
        this.scroll && this.scroll.disable()
      },
      enable() {
        this.scroll && this.scroll.enable()
      },
      refresh() {
        this.scroll && this.scroll.refresh()
      },
    
    },
    watch: {
      data() {
        setTimeout(() => {
          this.refresh()
        },20)
      }
    }
  }

你可能感兴趣的:(scroll,前端)