新增联动场景

ZZJ

2022-06-23 f7f0e44c4be8eb0e77fd310296c3b43bde21e4f9

 src/views/index/index.vue

@@ -12,11 +12,11 @@
      <li
        v-for="(item, index) in bannerList"
        :key="index"
        @click="toggleBanner(index + 1)"
        @click="toggleBanner(index)"
      >
        <button
          class="inner"
          :class="{ active: activeBanner == index + 1 }"
          :class="{ active: activeBanner == index }"
        ></button>
      </li>
    </ul>
@@ -136,10 +136,6 @@
    this.getBanner();
    this.getRecommend();
    this.getModule();
    window.addEventListener("scroll", this.scrollListener);
  },
  destroyed() {
    window.removeEventListener("scroll", this.scrollListener);
  },
  data() {
    return {
@@ -163,7 +159,7 @@
          router: "/trialCenter",
        },
      ], //推荐卡片数据
      activeBanner: 1, //选中的banner
      activeBanner: 0, //选中的banner
      activeCommend: 3, //选中的推荐tabs
      commendData: [], //推荐tab的数据
      productData: [],
@@ -365,7 +361,6 @@
      timer: null, //向上回滚动画
      ConnectTimer: null, // 控制弹层的定时器
      bannerList: [],
      showConnect: false, //显示联系我们与回到顶部
    };
  },
  methods: {
@@ -401,22 +396,6 @@
    selecTab(id) {
      this.activeCommend = id;
      this.getRecommend();
    },
    //添加滚动监听
    scrollListener() {
      //页面滑动触发事件 (滚动条移动则调用是否显示返回顶部按钮事件)
      var a = document.documentElement.clientHeight; // 滚动容器的可视高
      var b = document.documentElement.scrollTop; // 滚动条距离顶部的高度
      var c = document.documentElement.scrollHeight; // 滚动容器的整个高度

      if (c === a + b) {
        //当滚动容器的可视高+滚动容器滚动了的高度（滚动条顶部距离滚动容器顶部的距离） = 滚动容器的整个高度时，说明滚动条到底了
        this.showConnect = true;
      } else {
        this.showConnect = false;
      }

      //检查滚动条是否在顶部，控制返回顶部按钮的隐藏和显示
    },
  },
  beforeRouteLeave(to, from, next) {