完善展览详情页的tabbar滚动联动交互效果

src/components/SlideImage/index.vue

@@ -101,7 +101,6 @@ export default {
     this.$nextTick(() => {
       const swiperTop = this.$refs.swiperTop.swiper;
       const swiperThumbs = this.$refs.swiperThumbs.swiper;
-      console.log(this.$refs);
       swiperTop.controller.control = swiperThumbs;
       swiperThumbs.controller.control = swiperTop;
     });

src/components/SlideImageGroup/index.vue

@@ -137,7 +137,7 @@ $themeColor: #2069c4;
   height: 100%;
   display: flex;
   flex-direction: column;
-  padding-bottom: 60px;
+  padding-bottom: 10px;
   .img-container {
     width: 100%;
     // height: 100%;
@@ -165,8 +165,8 @@ $themeColor: #2069c4;
 }
 .enlarge {
   position: absolute;
-  bottom: 80px;
-  right: 0px;
+  bottom: 19px;
+  right: -7px;
   display: flex;
   z-index: 9;
   display: flex;

src/utils/index.js

@@ -42,7 +42,7 @@ export function getFullUrl(url) {
  * @param href 预览地址
  * @param previewName 预览文件用户看到的名称
  */
- export function previewFile(href, previewName) {
+export function previewFile(href, previewName) {
   let a = document.createElement("a");
   a.href = href;
   a.target = '_blank'
@@ -58,11 +58,11 @@ export function getFullUrl(url) {
  * 增加千位分割符 
  * @param num 
  */
-export function addSeparator(num){
-  var res=num.toString().replace(/\d+/, function(n){ // 先提取整数部分
-       return n.replace(/(\d)(?=(\d{3})+$)/g,function($1){
-          return $1+",";
-        });
+export function addSeparator(num) {
+  var res = num.toString().replace(/\d+/, function (n) { // 先提取整数部分
+    return n.replace(/(\d)(?=(\d{3})+$)/g, function ($1) {
+      return $1 + ",";
+    });
   })
   return res;
 }
@@ -73,13 +73,44 @@ export function addSeparator(num){
  * @param num 
  */
 export function formatNum(num) {
-	num = Number(num);
-	if (num == 0) {
-		return num + '';
-	} else
-	if (num > 0 && num < 10000) {
-		return num + '';
-	} else {
-		return (num / 10000).toFixed(1) + 'w'; 
-	}
-}
\ No newline at end of file
+  num = Number(num);
+  if (num == 0) {
+    return num + '';
+  } else
+    if (num > 0 && num < 10000) {
+      return num + '';
+    } else {
+      return (num / 10000).toFixed(1) + 'w';
+    }
+}
+
+// 监听某元素是否在可视区，使用getBoundingClientRect
+export const isElementInViewport = function (el) {
+  // rect.top 元素距离视窗的位置
+  //window.innerHeight || document.documentElement.clientHeight 文档的高度，前为BOM对象方式获取，后为DOM对象方式获取
+  if (el) {
+    const viewWidth =
+      window.innerWidth || document.documentElement.clientWidth;
+    const viewHeight =
+      window.innerHeight || document.documentElement.clientHeight;
+    const { top, right, bottom, left } = el.getBoundingClientRect();
+
+    return (
+      top >= 0 && left >= 0 && right <= viewWidth && bottom <= viewHeight
+    );
+  }
+};
+
+// 监听某元素是否在可视区，使用getBoundingClientRect
+export const isElementInViewport2 = function (content) {
+  let scrollTop =
+    window.pageYOffset ||
+    document.documentElement.scrollTop ||
+    document.body.scrollTop;
+  let clientHeight =
+    document.documentElement.clientHeight || window.innerHeight;
+  if (content) {
+    return (content.offsetTop + content.offsetHeight > scrollTop &&
+      content.offsetTop < scrollTop + clientHeight)
+  }
+};