vue下拉滚动控件 better-scroll

better-scroll

安装
npm install better-scroll --save

组件中引入
import BScroll from 'better-scroll'

使用：

必须放在$nextTick()

this.$nextTick(() => {
  // 实例化 参数1 要滚动的Dom的父级元素
  this.foodsscroll = new BScroll(this.$refs.foodsscroll, {
    // 设置3可以监测到滚动的实时位置
    probeType: 3
    // 设置ture 滚动的列表才可以触发点击事件
    click: true
  })
  // 通过scroll事件 获取xy位置
  this.foodsscroll.on('scroll', (pos) => {
    this.scrollY = Math.abs(Math.round(pos.y))
    console.log(this.scrollY)
  })
})

 

指定滚动到具体的元素：

// el是Dom
this.scroll_1.scrollToElement(el, 300);

 

避免重复实例化

      this.$nextTick(() => {
        if (!this.foodscroll) {
          this.foodscroll = new BScroll(this.$refs.foodscroll, {
            click: true
          });
        } else {
          this.foodscroll.refresh();
        }
      })

 

 

如果刚开始就需要用到的数据是父组件传过来的，那么需要监听better-scroll变化
watch: {
// 当数据seller变化时重新渲染dom完成下拉滚动
seller: ['scroll_1', 'scroll_2']
},

 

 

横向滚动：

      // 如果有图片数据
      if (this.seller.pics) {
        // 先把需要滚动dom设置宽度
        this.$refs.piclist.style.width = width - margin + 'px'
        // 添加滚动
        this.$nextTick(() => {
          // 如果没有picScroll才去实例化
          if (!this.picScroll) {
            // 实例化BScroll 需要接受两个参数 （ 需要下拉的dom、对象 ）
            this.picScroll = new BScroll(this.$refs.picwrapper, {
              // 设置为横向滚动
              scrollX: true,
              // 这个属性 设置它的外层是竖向滚动 而它自己可以横向滚动
              eventPassthrough: 'vertical'
            })
          }else {
            // 否则调用refresh()方法从新计算
            this.picScroll.refresh()
          }         
        })
      }