From 0d34bc674e88192b80d859e78056b967d2197317 Mon Sep 17 00:00:00 2001
From: luJianJun <2587063613@qq.com>
Date: Thu, 3 Aug 2023 12:03:47 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=AA=E4=BA=BA=E8=AF=A6=E6=83=85=E9=A1=B5-?=
 =?UTF-8?q?=E5=9B=BE=E7=89=87=E5=B1=95=E7=A4=BA=E7=BB=84=E4=BB=B6=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/detail.vue | 78 ++++++++++++++++++++++++++------------------
 1 file changed, 46 insertions(+), 32 deletions(-)

diff --git a/src/views/detail.vue b/src/views/detail.vue
index fafe6ba..84449ee 100644
--- a/src/views/detail.vue
+++ b/src/views/detail.vue
@@ -177,29 +177,31 @@
                             </div>
                             <div class="img-list-box dis-f jus-x al-item" v-show="imgList.length > 0">
                                 <img src="../assets/img/detail/moreNot.svg" class="icon left-icon" alt=""
-                                    @click.stop="moveImageList('left')"
-                                    v-show="imgListTab === 0 && imageLIst[imageLIst.length - 1] > 800">
+                                    v-show="imgListTab === 0 && scrollWidth > clientWidth">
                                 <img src="../assets/img/detail/moreAllow.svg" class="icon left-icon" alt=""
                                     style="transform: rotate(180deg);" @click.stop="moveImageList('left')"
-                                    v-show="imgListTab > 0 && imageLIst[imageLIst.length - 1] > 800">
+                                    v-show="imgListTab > 0 && scrollWidth > clientWidth">
                                 <img src="../assets/img/detail/moreAllow.svg" class="icon right-icon" alt=""
                                     @click.stop="moveImageList('right')"
-                                    v-show="imgList.length - 1 !== imgListTab && imageLIst[imageLIst.length - 1] > 800">
+                                    v-show="imgList.length - 1 !== imgListTab && 
+                                    scrollWidth > clientWidth && 
+                                    imageLIstLeft[imgListTab] + clientWidth < scrollWidth">
                                 <img src="../assets/img/detail/moreNot.svg" class="icon right-icon" alt=""
-                                    style="transform: rotate(180deg);" @click.stop="moveImageList('right')"
-                                    v-show="imgList.length - 1 === imgListTab && imageLIst[imageLIst.length - 1] > 800">
+                                    style="transform: rotate(180deg);" v-show="
+                                        scrollWidth > clientWidth &&
+                                        imageLIstLeft[imgListTab] + clientWidth >= scrollWidth">
                                 <div class="dis-f al-item list-box s-w-100" ref="imageList" v-if="imgList.length > 0">
                                     <div v-for="(item, i) in imgList" :key="i"
-                                        @click.stop="imageIndex = i, imageShow = true">
+                                        @click.stop="imageIndex = i, imageShow = true" ref="imgData">
                                         <div class="video" v-if="item && !item.thumbnail">
                                             <div class="icon-box dis-f jus-x al-item">
                                                 <img src="../assets/img/detail/videoStop.svg" class="icon" alt="">
                                             </div>
-                                            <img class="video" ref="imgData" :src="item.image" @load="setImageWidth(i)"
+                                            <img class="video" :src="item.image" @load="setImageWidth(i)"
                                                 @error="setImageWidth(i)" alt="">
                                         </div>
                                         <div class="img dis-f" v-if="item && item.thumbnail">
-                                            <img class="img" style="margin:0;" ref="imgData" :src="item.thumbnail"
+                                            <img class="img" style="margin:0;" :src="item.thumbnail"
                                                 @load="setImageWidth(i)" @error="setImageWidth(i)" alt="">
                                         </div>
                                     </div>
@@ -801,12 +803,13 @@
                                 :class="{ 'jus-bet': concatData.data && concatData.data.count > 2 }">
                                 <!-- class='s-w-100' -->
                                 <div class="s-w-100">
-                                    <div class="liner-title" 
-                                    :class="{'mg-b-50':concatData.data && concatData.data.count == 2&&concatData.data.wechatdata.url}">
+                                    <div class="liner-title"
+                                        :class="{ 'mg-b-50': concatData.data && concatData.data.count == 2 && concatData.data.wechatdata.url }">
                                         联系方式
                                     </div>
                                     <div class="dis-f jus-bet s-w-100">
-                                        <div v-if="concatData.data && (concatData.data.count > 2||(!concatData.data.wechatdata.url&&concatData.data.count== 2))">
+                                        <div
+                                            v-if="concatData.data && (concatData.data.count > 2 || (!concatData.data.wechatdata.url && concatData.data.count == 2))">
                                             <div class="mg-b-30"
                                                 v-if="concatData.data && concatData.data.wechat && concatData.data.count >= 2">
                                                 <div class="dis-f al-item">
@@ -824,8 +827,7 @@
                                                     </div>
                                                 </div>
                                             </div>
-                                            <div class="mg-b-30"
-                                                v-if="concatData.data && concatData.data.count >= 2">
+                                            <div class="mg-b-30" v-if="concatData.data && concatData.data.count >= 2">
                                                 <div class="dis-f al-item">
                                                     <img src="../assets/img/detail/WhatsAppIcon.png" class="whatsapp-icon"
                                                         alt="">
@@ -877,7 +879,7 @@
                                             </div>
                                         </div>
                                         <div class="round dis-f jus-x al-item"
-                                        :class="{'mg-t-20':concatData.data && concatData.data.count > 2 && !concatData.data.wechatdata.url}"
+                                            :class="{ 'mg-t-20': concatData.data && concatData.data.count > 2 && !concatData.data.wechatdata.url }"
                                             v-if="concatData.data && concatData.data.count >= 2 && !concatData.data.wechatdata.url">
                                             <div class="deepen dis-f jus-x al-item">
                                                 <div class="center-box dis-f jus-x al-item">
@@ -891,7 +893,7 @@
                                         </div>
                                     </div>
                                     <div class="dis-f al-item whatsapp-wx-box s-w-100 jus-sp"
-                                        v-if="concatData.data && concatData.data.count === 2 && concatData.data.wechatdata.aid !== 0&&concatData.data.wechatdata.url">
+                                        v-if="concatData.data && concatData.data.count === 2 && concatData.data.wechatdata.aid !== 0 && concatData.data.wechatdata.url">
                                         <div>
                                             <div>
                                                 <div v-if="concatData.data.whatsapp">
@@ -1078,41 +1080,52 @@ let imageList = ref(null)
 let imgList = ref([])
 
 //图片距离
-let imageLIst = ref([])
+let imageLIstLeft = ref([])
 
 let imgListTab = ref(0)
 //计时器
 let interval = ''
+let clientWidth = ref(null) 
+let scrollWidth = ref(null) 
 //点击方向按钮
 let moveImageList = (type) => {
-    let clientWidth = imageList.value.clientWidth
-    let scrollWidth = imageList.value.scrollWidth
-    if (type === 'right' && imageLIst.value[imgListTab.value] + clientWidth >= scrollWidth) return
-    if ((type === 'left' && imgListTab.value === 0) || (imgListTab.value === imageLIst.value.length - 1 && type === 'right')) return
+    if (type === 'right' && imgScrollBottom()) return
+    if ((type === 'left' && imgListTab.value === 0) || (imgListTab.value === imageLIstLeft.value.length - 1 && type === 'right')) return
     type === 'left' ? imgListTab.value-- : imgListTab.value++
-    setOffsetWidth(imageLIst.value[imgListTab.value], type)
+    setOffsetWidth(imageLIstLeft.value[imgListTab.value], type)
 }
 //设置滚动
 let setOffsetWidth = (num, type) => {
     let scroll = 0
-    let clientWidth = imageList.value.clientWidth
-    let scrollWidth = imageList.value.scrollWidth
     interval = setInterval(() => {
         if (!imageList.value) {
             clearInterval(interval)
             return
         }
         scroll = type === 'left' ? imageList.value.scrollLeft -= 10 : imageList.value.scrollLeft += 10
-        if ((type === 'left' ? num >= scroll : num <= scroll) || scroll + clientWidth >= scrollWidth) {
+        if ((type === 'left' ? num >= scroll : num <= scroll) || scroll + clientWidth.value >= scrollWidth.value) {
             clearInterval(interval)
         }
     })
 }
 
+//判断是否触底
+let imgScrollBottom = () => {
+    let clientWidth = imageList.value.clientWidth
+    let scrollWidth = imageList.value.scrollWidth
+    return imageLIstLeft.value[imgListTab.value] + clientWidth >= scrollWidth
+}
+
 let imgData = ref(null)
 //获取图片宽度
 let setImageWidth = (num) => {
-    imageLIst.value[num] = imgData.value[num] && imgData.value[num].offsetLeft - 20
+    imageLIstLeft.value[num] = imgData.value[num] && imgData.value[num].offsetLeft - 20
+    console.log(imageLIstLeft.value)
+    if (imageLIstLeft.value.length === imgList.value.length) {
+        clientWidth.value = imageList.value.clientWidth
+        scrollWidth.value = imageList.value.scrollWidth
+        console.log(scrollWidth.value,clientWidth.value)
+    }
 }
 
 //学校地址数据
@@ -1494,7 +1507,8 @@ img {
 .jus-x {
     justify-content: center;
 }
-.jus-sp{
+
+.jus-sp {
     justify-content: space-around;
 }
 
@@ -1674,8 +1688,8 @@ img {
                 letter-spacing: normal;
                 color: #333333;
 
-                .mg-l-80{
-                    margin-left:80px;
+                .mg-l-80 {
+                    margin-left: 80px;
                 }
 
                 .round {
@@ -1776,8 +1790,8 @@ img {
                         margin-bottom: 30px;
                     }
 
-                    .mg-b-50{
-                        margin-bottom:50px;
+                    .mg-b-50 {
+                        margin-bottom: 50px;
                     }
 
                     .mg-b-30 {
@@ -1793,7 +1807,7 @@ img {
                         margin-top: 20px;
 
                         .num-text {
-                            width:180px;
+                            width: 180px;
                             word-wrap: break-word;
                         }
                     }