仿照旧版支付宝生活服务模块-滚动定位 + 点击定位(上)

    <!-- 标题栏 -->
    <header class="title_father">
      <ul :class="[‘title_list_box‘,{‘titleFixed‘:Fixed}]" ref="titleRef">
        <li
          v-for="(item,index) in titleList"
          :key="index"
          class="title_list_item"
          :class="{active: tabChose == index}"
          @click="handleTab(index)"
        >
          <div :class="{active: tabChose == index}">{{item.title}}</div>
        </li>
      </ul>
    </header>

    <!-- 内容列表 -->
    <ul
      :class="[‘content_list_box‘,{‘contentFixed‘:Fixed}]"
      :style="{height:(screenHeight + lastTop - 260) + ‘px‘}"
    >
      <li
        v-for="(item,index) in contentBox"
        :key="index"
        class="content_list_item"
        @scroll="contentScroll(index)"
        ref="contentRef"
        @click="goPage(item)"
      >
        <div class="content_title" v-if="index" ref="contentBox">{{item.title}}</div>
        <div class="content_box">
          <div
            v-for="(subItem,subIndex) in item.contentList"
            :key="subIndex"
            class="content_item"
            @click="goLifePage(subItem,subIndex)"
          >
            <div class="item_inner" :class="{‘selectStatus‘:isEdit}">
              <i
                :style="{background:`url(${require(`@/assets/images/life/index/${subItem.icon_name}.png`)}) no-repeat center/100%`}"
                class="icon"
              ></i>
              <p class="content_name">{{subItem.content_name}}</p>
              <i class="jia_icon" v-if="isEdit" :class="{‘jianIcon‘:subItem.changeIcon}"></i>
            </div>
          </div>
        </div>
        <div class="line" v-if="index<contentBox.length-1"></div>
      </li>
    </ul>

 data() {
    return {
      titleList: [
        {
          title: "视频娱乐",
          id: 0
        },
        {
          title: "卡密相关",
          id: 1
        },
        {
          title: "充值中心",
          id: 2
        },
        {
          title: "生活缴费",
          id: 3
        },
        {
          title: "车务交罚",
          id: 4
        },
        {
          title: "生活服务",
          id: 5
        }
      ], // tab标题数据
      tabChose: 0, // 高亮索引值
      contentBox: [
        {
          type: "videoEnt",
          title: "视频娱乐",
          contentList: [
            {
              type: "iqiyiVideo",
              icon_name: "aiqiyi@2x",
              content_name: "爱奇艺",
              changeIcon: false
            },
            {
              type: "tencentVideo",
              icon_name: "tengxunshipin@2x",
              content_name: "腾讯视频",
              changeIcon: false
            },
            {
              type: "youkuVideo",
              icon_name: "youkushipin@2x",
              content_name: "优酷视频",
              changeIcon: false
            }
          ]
        },
        {
          title: "卡密相关",
          contentList: [
            {
              type: "jingdongEcard",
              icon_name: "jingdongeka@2x",
              content_name: "京东E卡卡密",
              changeIcon: false
            },
            {
              type: "wangyiEcard",
              icon_name: "wangyi@2x",
              content_name: "网易严选",
              changeIcon: false
            }
            //   {
            //     icon_name: "weipinhui@2x",
            //     content_name: "唯品会卡密"
            //   },
            //   {
            //     icon_name: "xingbake@2x",
            //     content_name: "星巴克卡密"
            //   },
            //   {
            //     icon_name: "baiguoyuan@2x",
            //     content_name: "百果园卡密"
            //   },
            //   {
            //     icon_name: "shenzhouzhuanche@2x",
            //     content_name: "神州专车卡密"
            //   }
          ]
        },
        {
          title: "充值中心",
          contentList: [
            {
              type: "FlowRecharge",
              icon_name: "liuliang@2x",
              content_name: "流量充值",
              changeIcon: false
            },
            {
              type: "PhoneRecharge",
              icon_name: "huafei@2x",
              content_name: "话费充值",
              changeIcon: false
            }
          ]
        },
        {
          title: "生活缴费",
          contentList: [
            {
              type: "lifePayment",
              icon_name: "shuifei@2x",
              content_name: "水费查缴",
              changeIcon: false
            },
            {
              type: "lifePayment",
              icon_name: "dianfei@2x",
              content_name: "电费查缴",
              changeIcon: false
            },
            {
              type: "lifePayment",
              icon_name: "ranqi@2x",
              content_name: "燃气查缴",
              changeIcon: false
            }
          ]
        },
        {
          title: "车务交罚",
          contentList: [
            {
              type: "violationSearch",
              icon_name: "chaxun@2x",
              content_name: "违章查询",
              changeIcon: false
            },
            {
              type: "violationPay",
              icon_name: "jiaofei@2x",
              content_name: "违章缴费",
              changeIcon: false
            }
          ]
        },
        {
          type: "",
          title: "生活服务",
          contentList: [
            {
              type: "weather",
              icon_name: "zhiliang@2x",
              content_name: "天气预报",
              changeIcon: false
            },
            {
              type: "aqi",
              icon_name: "yubao@2x",
              content_name: "空气质量",
              changeIcon: false
            }
          ]
        }
      ], // 列表数据
      Fixed: false, // 是否吸顶
      scroll: 0, // y轴滚动距离
      screenHeight: document.body.clientHeight, //屏幕高度
      titleArr: "", // tab栏数组
      contentArr: "", // 列表栏数组
      titleBox: "", // tab栏父元素
      titleTop: 0, // tab栏到顶部的距离
      titleBoxHeight: 0, //标题栏的高度
      lastTop: 0, //最后一个内容距离顶部的高度
    };
  },
  mounted() {
    this.titleArr = document.querySelectorAll(".title_list_item");
    this.contentArr = document.querySelectorAll(".content_list_item");
    this.titleBox = document.querySelector(".title_list_box");
    window.addEventListener("scroll", this.handleScroll);
    // 获取屏幕的高度
    const that = this;
    window.onresize = () => {
      return (() => {
        window.screenHeight = document.body.clientHeight;
        that.screenHeight = window.screenHeight;
      })();
    };
    this.setContentHeight();
  },
   methods: {
    // tab栏切换
    handleTab(index) {
      this.tabChose = index;
      if (this.titleList[index].title === this.contentBox[index].title) {
        this.contentScroll(index);
      }
    },
    // 点击内容发生相应变化
    contentScroll(index) {
      // 获取每一个内容offsetTop高度
      let contentTop = this.contentArr[index].offsetTop;
      // 获取tab栏的高度
      this.titleBoxHeight =
        this.titleBox.offsetHeight || this.titleBox.clientHeight;
      window.scrollTo(0, contentTop - 110); // 55
    },
    //滚动监听
    handleScroll() {
      // 获取滚动距离
      this.scroll =
        document.documentElement.scrollTop || document.body.scrollTop;
      // 获取tab栏到顶部的距离
      if (document.querySelector(".title_list_box")) {
        this.titleTop = document.querySelector(".title_list_box ").offsetTop;
      }
      // 判断距离进行吸顶操作
      if (this.scroll > this.titleTop) {
        this.Fixed = true;
      } else {
        this.Fixed = false;
        this.tabChose = 0;
      }
      this.titleTop = 40;
      // 循环判断 滚动的距离 + 标题盒子的高度 >= 某条内容的高度时,设置该标题高亮,标题栏发生相应的滚动
      for (var i = 0; i < this.titleArr.length; i++) {
        if (this.scroll + this.titleTop * 2 >= this.contentArr[i].offsetTop) {
          // 1.5
          this.tabChose = i + 1;
          // scrollLeft代替scrollTo，解决安卓手机在微信浏览器中scrollTo事件失效
          document.querySelector(".title_list_box").scrollLeft = i * 30; // 25
        }
      }
    },
    // 动态设置内容总体提高
    setContentHeight() {
      this.lastTop = this.contentArr[5].offsetTop;
      console.log(this.contentArr[5].offsetHeight);
    },
   }