From f7f0e44c4be8eb0e77fd310296c3b43bde21e4f9 Mon Sep 17 00:00:00 2001
From: ZZJ <10913410+zzj2100@user.noreply.gitee.com>
Date: 星期四, 23 六月 2022 14:17:01 +0800
Subject: [PATCH] 新增联动场景

---
 src/components/Connect.vue |   29 ++++++++++++++++++++++++++++-
 1 files changed, 28 insertions(+), 1 deletions(-)

diff --git a/src/components/Connect.vue b/src/components/Connect.vue
index 276babb..222120c 100644
--- a/src/components/Connect.vue
+++ b/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 {

--
Gitblit v1.8.0