摘要：先看效果介紹一個(gè)簡(jiǎn)單的靜態(tài)頁面主要是使用做橫向滾動(dòng)，點(diǎn)擊標(biāo)簽滾動(dòng)到相應(yīng)位置，以及滾到相應(yīng)位置后對(duì)應(yīng)標(biāo)簽顯示紅色。

一個(gè)簡(jiǎn)單的靜態(tài)頁面主要是使用 better-scroll 做橫向滾動(dòng)，
點(diǎn)擊標(biāo)簽滾動(dòng)到相應(yīng)位置，以及滾到相應(yīng)位置后對(duì)應(yīng)標(biāo)簽顯示紅色。
開發(fā)過程中遇到了幾個(gè)問題
一：初始化的時(shí)候要計(jì)算內(nèi)容的高度，一直有誤差，因?yàn)橐婚_始直接用img引入的，沒加載完就計(jì)算高度就會(huì)有問題
解決辦法：用background寫圖片，然后高度寫死
二：滾動(dòng)到某個(gè)內(nèi)容，對(duì)應(yīng)標(biāo)簽高亮
這里比較的是當(dāng)前滾動(dòng)位置高度和內(nèi)容距離dom頂部的高度加上實(shí)際nav的高度
三：better-scroll fixed后滾動(dòng)失效
這里是因?yàn)闆]有給固定的寬度，用了100%造成的。這里給了tab-warp 寬度就解決了

記錄一下和大家共同學(xué)習(xí)

因?yàn)槭庆o態(tài)野蠻標(biāo)題放到數(shù)組中了

        itemList: [{
          "title": "戰(zhàn)略升級(jí)"
        },
        {
          "title": "官方授權(quán)"
        },
        {
          "title": "100%正品"
        },
        {
          "title": "全鏈路監(jiān)管"
        },
        {
          "title": "陽光保險(xiǎn)"
        },
        {
          "title": "售后無憂"
        },
        {
          "title": "專業(yè)倉儲(chǔ)"
        },
        {
          "title": "用戶好評(píng)"
        },
        {
          "title": "媒體監(jiān)督"
        },
        {
          "title": "資質(zhì)公示"
        }

        ],
        
     mounted() {
      this.$nextTick(() => {
        window.addEventListener("scroll", this.handleScroll) // 監(jiān)聽滾動(dòng)事件
        this.InitTabScroll() // 初始化滾動(dòng)
      })
    },
    
    methods: {
      handleChange(index) {
        this.swipeIndex.nowIndex = index + 1
      },
      // 監(jiān)聽滾動(dòng)事件
      handleScroll() {
        const scrollTop = window.pageYOffset || document.documentElement.scrollTop ||
          document.body.scrollTop
        // 吸頂效果
        const isFixed = scrollTop >= this.tabToTop
        if (isFixed !== this.isFixed) {
          this.isFixed = isFixed
        }
        // 當(dāng)頁面滾動(dòng)時(shí)候標(biāo)簽也要滾動(dòng)
        for (var i = 0; i < this.contentH.length; i++) {
          // 循環(huán)判斷內(nèi)容高度的數(shù)組，滾動(dòng)的高度小于前一個(gè)大于后一個(gè)設(shè)置，這里是包含下拉面板的高度（我也不知道為什么，自己試出來的，尷尬）
          if (scrollTop +  this.tabRealHeight> this.contentH[i] && scrollTop +  this.tabRealHeight< this.contentH[i + 1]) {
            if (this.checkIndex !== i) {
              this.checkIndex = i
              // 然后設(shè)置標(biāo)簽高亮，滾動(dòng)到居中位置
              this.scroll.scrollToElement(this.$refs.tabitem[i], 300, -100)
            }
          }
        }
      },
     
      // 初始化方法
      InitTabScroll() {
      /* 
       * 這里有幾個(gè)高度需要注意一下，因?yàn)楹竺嬉?jì)算滾動(dòng)距離，這里要很精確要不就會(huì)出問題
       * tabToTop tab距離頂部的高度，也就是第一個(gè)圖片的高度
       * tabRealHeight 是tab點(diǎn)下拉箭頭顯示面板后的高度
       * 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
        // 內(nèi)容高度要記錄下來放在數(shù)組里，當(dāng)頁面滾動(dòng)的時(shí)候判斷在哪個(gè)區(qū)間，對(duì)于標(biāo)簽高亮
        for (let i = 0; i < 11; i++) {
          this.contentH.push(this.$refs["contentItem" + i].offsetTop)
        }
        // nav橫向滾動(dòng)寬度，然后設(shè)置
        let width = 0
        for (let i = 0; i < this.itemList.length; i++) {
          width += this.$refs.tabitem[i].getBoundingClientRect().width // getBoundingClientRect() 返回元素的大小及其相對(duì)于視口的位置
        }
        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()
          }
        })
      },
      // 點(diǎn)擊nav標(biāo)簽
      checkStatus(index, pop) {
        this.checkIndex = index
        // 點(diǎn)擊展開面板的選項(xiàng)
        if (pop) {
          this.flag = !this.flag
        }
        // 點(diǎn)擊標(biāo)簽后，標(biāo)簽要滾到nav中間位置
        this.scroll.scrollToElement(this.$refs.tabitem[index], 300, -100)
        // 獲取該點(diǎn)擊標(biāo)簽對(duì)應(yīng)的內(nèi)容區(qū)域，距離dom頂部高度
        const offsetTop = this.$refs["contentItem" + index].offsetTop
        // 頁面滾動(dòng)到高度減去nav的位置
        window.scrollTo(0, offsetTop - this.tabHeight)
      }
    }
    
  

主要功能實(shí)現(xiàn)了，但是還有很多需要優(yōu)化的地方
查看demo 正品保障 完整代碼 github
微信掃碼看我們的小程序

您可以掃描添加下方的微信并備注 Soul 加交流群，給我提意見，交流學(xué)習(xí)。