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
        },