vue better-scroll 遇到的坑

先看效果

介绍

一个简单的静态页面主要是使用 better-scroll 做横向滚动，
点击标签滚动到相应位置，以及滚到相应位置后对应标签显示红色。
开发过程中遇到了几个问题
一：初始化的时候要计算内容的高度，一直有误差，因为一开始直接用img引入的，没加载完就计算高度就会有问题
解决办法：用background写图片，然后高度写死
二：滚动到某个内容，对应标签高亮
这里比较的是当前滚动位置高度和内容距离dom顶部的高度加上实际nav的高度
三：better-scroll fixed后滚动失效
这里是因为没有给固定的宽度，用了100%造成的。这里给了tab-warp 宽度就解决了

记录一下和大家共同学习

主要代码

因为是静态野蛮标题放到数组中了

        itemList: [{
          'title': '战略升级'
        },
        {
          'title': '官方授权'
        },
        {
          'title': '100%正品'
        },
        {
          'title': '全链路监管'
        },
        {
          'title': '阳光保险'
        },
        {
          'title': '售后无忧'
        },
        {
          'title': '专业仓储'
        },
        {
          'title': '用户好评'
        },
        {
          'title': '媒体监督'
        },
        {
          'title': '资质公示'
        }

        ],
        
     mounted() {
      this.$nextTick(() => {
        window.addEventListener('scroll', this.handleScroll) // 监听滚动事件
        this.InitTabScroll() // 初始化滚动
      })
    },
    
    methods: {
      handleChange(index) {
        this.swipeIndex.nowIndex = index + 1
      },
      // 监听滚动事件
      handleScroll() {
        const scrollTop = window.pageYOffset || document.documentElement.scrollTop ||
          document.body.scrollTop
        // 吸顶效果
        const isFixed = scrollTop >= this.tabToTop
        if (isFixed !== this.isFixed) {
          this.isFixed = isFixed
        }
        // 当页面滚动时候标签也要滚动
        for (var i = 0; i < this.contentH.length; i++) {
          // 循环判断内容高度的数组，滚动的高度小于前一个大于后一个设置，这里是包含下拉面板的高度（我也不知道为什么，自己试出来的，尴尬）
          if (scrollTop +  this.tabRealHeight> this.contentH[i] && scrollTop +  this.tabRealHeight< this.contentH[i + 1]) {
            if (this.checkIndex !== i) {
              this.checkIndex = i
              // 然后设置标签高亮，滚动到居中位置
              this.scroll.scrollToElement(this.$refs.tabitem[i], 300, -100)
            }
          }
        }
      },
     
      // 初始化方法
      InitTabScroll() {
      /* 
       * 这里有几个高度需要注意一下，因为后面要计算滚动距离，这里要很精确要不就会出问题
       * tabToTop tab距离顶部的高度，也就是第一个图片的高度
       * tabRealHeight 是tab点下拉箭头显示面板后的高度
       * tabHeight 就是tab的高度了
       */
        // 头部高度 
        this.tabToTop = this.$refs['tab-containter'].offsetTop
        // tab 带面板高度
        this.tabRealHeight = this.$refs['tab-containter'].offsetHeight
        // tab 高度
        this.tabHeight = this.$refs['tabitem'][0].offsetHeight
        // 内容高度要记录下来放在数组里，当页面滚动的时候判断在哪个区间，对于标签高亮
        for (let i = 0; i < 11; i++) {
          this.contentH.push(this.$refs['contentItem' + i].offsetTop)
        }
        // nav横向滚动宽度，然后设置
        let width = 0
        for (let i = 0; i < this.itemList.length; i++) {
          width += this.$refs.tabitem[i].getBoundingClientRect().width // getBoundingClientRect() 返回元素的大小及其相对于视口的位置
        }
        this.$refs.tabWrapper.style.width = width + 'px'
        
        this.$nextTick(() => {
          if (!this.scroll) {
            this.scroll = new BScroll(this.$refs.tab, {
              startX: 0,
              click: true,
              scrollX: true,
              scrollY: false,
              eventPassthrough: 'vertical'
            })
          } else {
            this.scroll.refresh()
          }
        })
      },
      // 点击nav标签
      checkStatus(index, pop) {
        this.checkIndex = index
        // 点击展开面板的选项
        if (pop) {
          this.flag = !this.flag
        }
        // 点击标签后，标签要滚到nav中间位置
        this.scroll.scrollToElement(this.$refs.tabitem[index], 300, -100)
        // 获取该点击标签对应的内容区域，距离dom顶部高度
        const offsetTop = this.$refs['contentItem' + index].offsetTop
        // 页面滚动到高度减去nav的位置
        window.scrollTo(0, offsetTop - this.tabHeight)
      }
    }
    
  

总结

主要功能实现了，但是还有很多需要优化的地方
查看demo 正品保障 完整代码 github
微信扫码看我们的小程序

关于我

获取更多技术相关文章，关注公众号”前端女塾“。
回复加群，即可加入”前端仙女群“

您可以扫描添加下方的微信并备注 Soul 加交流群，给我提意见，交流学习。