摘要：先看效果介紹一個簡單的靜態頁面主要是使用做橫向滾動，點擊標簽滾動到相應位置，以及滾到相應位置后對應標簽顯示紅色。

一個簡單的靜態頁面主要是使用 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 加交流群，給我提意見，交流學習。