vue watch 監聽實現錨點導航效果

近來項目沒有什么新增的需求、簡單總結一下watch 使用場景。

Vue 通過 watch選項提供了一個更通用的方法，來響應數據的變化。當需要在數據變化時執行異步或開銷較大的操作時，這個方式是最有用的。

例如：我在做一個滾動錨點定位 實現效果如下，滾動到洗護專區時，上面的導航欄選項呈現被選中狀態。點擊上面導航寶寶洗護時，洗護專區定位到響應的位置。

 

 第一步需要在data中定義一個被選中的索引值 tabindex,來接收當前被選中的索引值。

data() {
        return {
            tabindex: 0, //導航選中索引
        }
    },

這樣就可以在watch中偵聽 tabindex 的值，當頁面滾動高度是當前導航選項范圍的區域時 tabindex 都不會變化

 watch:{
        tabindex(val){
            $('.tabWrap').animate({scrollLeft: $('.tabs')[val].offsetLeft - 150},100)
        }
    },

頁面滾動事件

 // 頁面滾動
        handleScroll(){
            var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
            this.tabBtnList.forEach((v,i)=>{
                if(scrollTop > ($('#'+ v).offset().top - 100)){
                    this.tabindex = i;
                }
            })
            
            if(scrollTop > 1500){
                this.topBtn = true
            }else{
                this.topBtn = false
            }
        },

導航點擊事件

  // 導航
        tabClick(e, i) {
            var url = e.currentTarget.getAttribute("data-url").split("&")[1].split("=")[1];
            this.tabindex = i;
            if(i> 0){
                $('.tabWrap').animate({scrollLeft: e.currentTarget.offsetLeft - 150},300)
            }
            var urlBox = document.getElementById(url);
            document.body.scrollTop = document.documentElement.scrollTop = urlBox.offsetTop - 90
        },