vue watch 监听实现锚点导航效果

近来项目没有什么新增的需求、简单总结一下watch 使用场景。

Vue 通过 watch选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

例如：我在做一个滚动锚点定位实现效果如下，滚动到洗护专区时，上面的导航栏选项呈现被选中状态。点击上面导航宝宝洗护时，洗护专区定位到响应的位置。

第一步需要在data中定义一个被选中的索引值 tabindex,来接收当前被选中的索引值。

1 data() {
2         return {
3             tabindex: 0, //导航选中索引
4         }
5     },

这样就可以在watch中侦听 tabindex 的值，当页面滚动高度是当前导航选项范围的区域时 tabindex 都不会变化

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

页面滚动事件

 1  // 页面滚动
 2         handleScroll(){
 3             var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
 4             this.tabBtnList.forEach((v,i)=>{
 5                 if(scrollTop > ($('#'+ v).offset().top - 100)){
 6                     this.tabindex = i;
 7                 }
 8             })
 9             
10             if(scrollTop > 1500){
11                 this.topBtn = true
12             }else{
13                 this.topBtn = false
14             }
15         },

导航点击事件

  // 导航
        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
        },