移动端 vant库tab页锚点定位+滚动tab切换（单页面）

tab页通常用于切换页面，我们今天做的是点击tab标签，定位到相应位置，也就是锚点定位，所以这里的tabs并没有起到太大的作用，仅仅是样式

首先首先锚点定位：

（先看看最后的样子）

 

html部分：

 <div ref="header" class="anchor-jump-node">
              <a href="" @click.prevent="goAnchor('#onlinecli', 0)">
                <span
                  :class="active === 0 ? 'active' : 'noactive'"
                  >线上门诊</span
                >
                <span
                  :class="active === 0 ? 'spanactive' : 'spannoactive'"
                ></span
              ></a>
              <a href="" @click.prevent="goAnchor('#maternity', 1)">
                <span
                  :class="active === 1 ? 'active' : 'noactive'"
                  >孕产服务</span
                >
                <span
                  :class="active === 1 ? 'spanactive' : 'spannoactive'"
                ></span
              ></a>
              <a href="" @click.prevent="goAnchor('#safeData', 2)">
                <span
                  :class="active === 2 ? 'active' : 'noactive'"
                  >母婴好物</span
                >
                <span
                  :class="active === 2 ? 'spanactive' : 'spannoactive'"
                ></span
              ></a>
              <a href="" @click.prevent="goAnchor('#baomaData', 3)">
                <span
                  :class="active === 3 ? 'active' : 'noactive'"
                  >宝妈交流</span
                >
                <span
                  :class="active === 3 ? 'spanactive' : 'spannoactive'"
                ></span>
              </a>
            </div>

以上主要用到a标签的锚点定位，但是千万不要在href里面写跳转地址（也就是对应的id）,这样点击跳转的时候会改变路由，从而返回上一页操作就会找不到对应路由，跳去首页，所以我们这里直接用click事件来处理，prevent防止a标签触发默认跳转事件

下面是对应跳转的地方（我每一个都是单独封装的组件，直接在组件外层设置id并与goAnchor里面第一个参数对应起来即可）：

       <div
              ref="scrollbox"
              class="inner-body"
              style="overflow: unset !important"
            >
              <div id="onlinecli" class="online-clinic-bac">
                <div style="height: 40px"></div>
                <onlineClinic :onlineData="onlineData"></onlineClinic>
              </div>

              <div id="maternity" class="maternity-services-bac">
                <div style="height: 90px"></div>
                <maternityService
                  :maternityData="maternityData"
                ></maternityService>
              </div>

              <div id="safeData" class="maternity-services-bac">
                <div style="height: 110px"></div>
                <safeguard :safeData="safeData"></safeguard>
              </div>

              <div id="baomaData" class="baoma-comunicate-bac">
                <div style="height: 60px"></div>
                <baomaCommunication :baomaData="baomaData"></baomaCommunication>
                <div class="baoma-buttom-bac"><p>健康孕产，科学育儿</p></div>
              </div>
            </div>

下面是在methods里面定义的goAnchor（）事件：

   goAnchor(selector, index) {
      this.active = index;//这里是样式处理 点击那个tab 该tab样式改变
      this.$el.querySelector(selector).scrollIntoView();
    },

以上，锚点定位就处理完毕了，接下来我们看看如何实现滚动，tab自动切换：

1、在mounted里面给该页面添加一个监听滚动条事件

   window.document.addEventListener("scroll", this.handleScroll, true);

2、处理改事件

    handleScroll(e) {
      let t = e.target.scrollTop;//监听的滚动条高度
      let maternity = document.querySelector("#maternity");//获取孕产服务头部到可视窗口头部距离
      let safeData = document.querySelector("#safeData");//获取母婴好物头部到可视窗口头部距离
      let baomaData = document.querySelector("#baomaData");//获取宝妈交流头部到可视窗口头部距离
      if (t <= maternity.offsetTop - 100 && t > 1) {
        this.active = 0;
      } else if (
        t >= maternity.offsetTop - 100 &&
        t < safeData.offsetTop - 200
      ) {
        this.active = 1;
      } else if (
        t >= safeData.offsetTop - 80 &&
        t < baomaData.offsetTop - 200
      ) {
        this.active = 2;
      } else if (t >= baomaData.offsetTop - 80) {
        this.active = 3;
      }
    },

其中具体的数据根据自己的来微调即可

3、在页面销毁前删除该事件

  beforeDestroy() {
      document.removeEventListener("scroll", this.listenerFunction);
    },

methods里面：（可合并）

    listenerFunction(e) {
      document.addEventListener("scroll", this.handleScroll, true);
    },

完结~