✨ feat(快捷访问组件): 页面拖动到底部后，动态切换快捷访问的高度

@@ -2,7 +2,7 @@
  * @Author: hookehuyr hookehuyr@gmail.com
  * @Author: hookehuyr hookehuyr@gmail.com
  * @Date: 2022-05-21 09:35:14
  * @Date: 2022-05-21 09:35:14
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-06-22 19:47:53
+ * @LastEditTime: 2022-06-24 14:26:37
  * @FilePath: /tswj/src/views/client/bookDetail.vue
  * @FilePath: /tswj/src/views/client/bookDetail.vue
  * @Description:
  * @Description:
 -->
 -->
@@ -105,7 +105,7 @@
         <my-button type="primary" @on-click="toDonate">爱心助力</my-button>
         <my-button type="primary" @on-click="toDonate">爱心助力</my-button>
       </div>
       </div>
     </div>
     </div>
-    <shortcut-fixed :type="USER_ROLE.CLIENT" :item="['home', 'me']" />
+    <shortcut-fixed :type="USER_ROLE.CLIENT" :item="['home', 'me']" :custom-style="customStyle" />
   </div>
   </div>
 
 
   <!-- 上传时，如果没有默认儿童提示弹框, 如果没有实名认证提示弹框 -->
   <!-- 上传时，如果没有默认儿童提示弹框, 如果没有实名认证提示弹框 -->
@@ -146,6 +146,9 @@ const $router = useRouter();
 const { toggleLanguage, onLoad, columns, prod_list, finished, loading, bookInfo, showPicker, checkLocalism, checkMandarin, onConfirm, chooseLanguage, finishedTextStatus, emptyStatus } = useVideoList();
 const { toggleLanguage, onLoad, columns, prod_list, finished, loading, bookInfo, showPicker, checkLocalism, checkMandarin, onConfirm, chooseLanguage, finishedTextStatus, emptyStatus } = useVideoList();
 let { userInfo } = useDefaultPerf($route.query.id);
 let { userInfo } = useDefaultPerf($route.query.id);
 
 
+const customStyle = ref({
+  bottom: '8rem'
+})
 const donateInfo = ref({})
 const donateInfo = ref({})
 const userType = Cookies.get('userType')
 const userType = Cookies.get('userType')
 // 判断是访客进入还是幼儿园进入
 // 判断是访客进入还是幼儿园进入
@@ -159,6 +162,22 @@ onMounted(async () => {
     // 判断是否显示简介的展开图标
     // 判断是否显示简介的展开图标
     hasToggle.value = hasEllipsis(`book-intro`);
     hasToggle.value = hasEllipsis(`book-intro`);
   }, 500);
   }, 500);
+  // 监听滚动到底部
+  window.onscroll = function () {
+    //变量scrollTop是滚动条滚动时，距离顶部的距离
+    const scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
+    //变量windowHeight是可视区的高度
+    const windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
+    //变量scrollHeight是滚动条的总高度
+    const scrollHeight = document.documentElement.scrollHeight||document.body.scrollHeight;
+     //滚动条到底部的条件
+    if(scrollTop + windowHeight === scrollHeight){
+      // console.warn("距顶部"+scrollTop+"可视区高度"+windowHeight+"滚动条总高度"+scrollHeight);
+      customStyle.value.bottom = '35%'
+    } else {
+      customStyle.value.bottom = '8rem'
+    }
+  }
 })
 })
 
 
 // 判断是否显示简介的展开图标
 // 判断是否显示简介的展开图标