Vue中better-scroll实现左右侧BScroll联动nextTick

最新推荐文章于 2025-06-02 03:56:06 发布

原创最新推荐文章于 2025-06-02 03:56:06 发布 · 455 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

本文介绍如何在Vue项目中使用better-scroll实现在移动端实现左侧和右侧滚动条的联动效果，通过nextTick确保滚动更新的同步性。

better-scroll用法实现左右侧关联

Vue中better-scroll实现左右侧联动

Vue中better-scroll实现左右侧联动


```javascript
<script>
import BScroll from 'better-scroll'
export default {
  watch: {
    menus() {
      this.$nextTick(() => {        
        this._initRightLiTops()
this._initBScroll()
      })
    },
  },
  methods: {
    _initBScroll() {
      this.leftBScroll = new BScroll('.menu-left', {
        click: true,
        mouseWheel: true,
        probeType: 3,
      })
      this.rightBScroll = new BScroll('.menu-right', {
        click: true,
        mouseWheel: true,
        probeType: 3,
      })
      this.rightBScroll.on('scroll', (pos) => {
        var scrollY = Math.abs(pos.y)
        for (var i = 0; i < this.rightLiTops.length - 1; i++) {
          if (
            scrollY >= this.rightLiTops[i] &&
            scrollY < this.rightLiTops[i + 1]
          ) {
            this.currentIndex = i
          }
        }
        var el = this.$refs.cate[this.currentIndex]
        this.leftBScroll.scrollToElement(el, 300, 0, -100)
      })
    },
    _initRightLiTops() {
      var top = 0
      var topArr = []
      topArr.push(top)
      this.$refs.cate.forEach((item) => {
        top += item.clientHeight
        topArr.push(top)
      })
      this.rightLiTops = topArr
      var bottom = this.$refs.itemList.getElementsByClassName('cate-bottom')[0]
      document.getElementsByClassName('category-info')[0].style.height = document.documentElement.clientHeight + 'px'
      console.log(document.body.clientHeight, 'document.body.clientHeight')
      bottom.style.height = this.$refs.itemList.clientHeight + 10 - this.$refs.cate[this.rightLiTops.length - 2].clientHeight +'px'
    }
  }
}
</script>