heyujie
2022-07-15 a0b5604fcefa0c7900ecc50830b718f77bba8f39
src/components/Connect.vue
@@ -30,7 +30,7 @@
    >
      <span class="iconfont">&#xe611;</span>联系我们
    </div>
    <div class="backToTop iconfont" @click="backToTop">&#xe610;</div>
    <div class="backToTop iconfont" v-if="showConnect" @click="backToTop">&#xe610;</div>
  </div>
</template>
@@ -39,7 +39,14 @@
  data() {
    return {
      isShowConnectBox: false, //固定定位弹层
      showConnect: false, //显示联系我们与回到顶部
    };
  },
  created() {
    window.addEventListener("scroll", this.scrollListener);
  },
   destroyed() {
    window.removeEventListener("scroll", this.scrollListener);
  },
  methods: {
    // 回到顶部
@@ -72,6 +79,22 @@
        _this.isShowConnectBox = false;
      }, 100);
    },
     //添加滚动监听
    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;
      }
      //检查滚动条是否在顶部,控制返回顶部按钮的隐藏和显示
    },
  },
};
</script>
@@ -88,6 +111,7 @@
  background: #ffffff;
  box-shadow: 0px 4px 12px rgba(0, 51, 128, 0.18);
  border-radius: 8px;
  z-index: 2;
  .tele,
  .advice {
@@ -130,12 +154,14 @@
    margin-top: 6px;
    margin-left: 34px;
    color: #0065ff;
    font-size: 12px;
  }
  .des {
    margin-top: 6px;
    margin-left: 34px;
    color: #666666;
    font-size: 12px;
  }
}
@@ -153,6 +179,7 @@
  border-radius: 22px;
  text-align: center;
  line-height: 20px;
  font-size: 14px;
  cursor: pointer;
  &:hover {