提交

src/components/detail/imageWatch.vue

@@ -3,7 +3,7 @@
         <div class="pos-r dis-f al-item mg-t-60">
             <div class="s-w-100">
                 <el-carousel arrow="never" height="600px" :autoplay="false" :initial-index="props.index"
-                    indicator-position="none" ref="carousel">
+                    indicator-position="none" ref="carousel" @change="carouselChange">
                     <el-carousel-item v-for="(item, i) in list" :key="i">
                         <div class="dis-f jus-x al-item" v-if="item">
                             <div class="img-box dis-f jus-x" style="width:600px" v-if="item['type'] != 'attachment'">
@@ -16,8 +16,8 @@
                     </el-carousel-item>
                 </el-carousel>
             </div>
-            <img src="../../assets/img/detail/imageArrowIcon.svg" class="image-arrow-icon left-arrow" @click="next" alt="">
-            <img src="../../assets/img/detail/imageArrowIcon.svg" class="image-arrow-icon right-arrow" @click="prev" alt="">
+            <img src="../../assets/img/detail/imageArrowIcon.svg" class="image-arrow-icon left-arrow" @click="prev" alt="">
+            <img src="../../assets/img/detail/imageArrowIcon.svg" class="image-arrow-icon right-arrow" @click="next" alt="">
         </div>
         <div class="tab-text">
             {{ `${imageTab + 1}/${list.length}` }}
@@ -40,7 +40,7 @@
         <img src="../../assets/img/detail/imageClose.svg" @click="close" class="close-img" alt="">
     </div>
 </template>
-  
+
 <script setup>
 import { reactive, onMounted, ref, defineProps, watchEffect } from 'vue'
 // type 的类型代表  attachment 图片  videos  视频   lives 直播
@@ -53,7 +53,12 @@ const props = defineProps({
             return []
         }
     },
-    index: Number,
+    index: {
+        type: Number,
+        default: function () {
+            return 0
+        }
+    },
     close: {
         type: Function
     },
@@ -70,33 +75,31 @@ let close = props.close
 let carousel = ref(null)
 let imageTab = ref(0)
 
- if(!props['index']) imageTab = props['index']
+
 //上一张
-let prev = () => {
-    if (imageTab.value === list.value.length - 1) return
-    imageTab.value++
-    carousel.value.prev()
-}
+let prev = () => carousel.value.prev()
+
+// 轮播图滚动后事件
+const carouselChange = value => imageTab.value = value
 
 //下一张
-let next = () => {
-    if (imageTab.value <= 0) return
-    imageTab.value--
-    carousel.value.next()
-}
+let next = () => carousel.value.next()
 
 //点击预览图
 let watchSet = (num) => {
-    imageTab.value = num
     carousel.value.setActiveItem(num)
 }
 
-watchEffect(() => {
-    show = props.show
-    list.value = props.list
-    if (imageTab.value > 0) carousel.value.setActiveItem(imageTab.value)
+
+onMounted(() => {
+    watchEffect(() => {
+        show = props.show
+        list.value = props.list
+        if (props.index >= 0) carousel.value.setActiveItem(props.index)
+    })
 
 })
+
 </script>
 <style scoped>
 img {

src/components/public/backToTop.vue

@@ -5,6 +5,29 @@
 </template>
 
 <script setup>
+onMounted(() => {
+    window.addEventListener('scroll', handleScroll);
+});
+
+onUnmounted(() => {
+    window.removeEventListener('scroll', handleScroll);
+});
+
+const handleScroll = () => {
+    if (Math.random() > 0.3) return
+    // for (let i = 0; i < navList.value.length; i++) {
+    //     let element = navList.value[i]
+
+    //     const rect = eval(element.value).value.getBoundingClientRect();
+    //     const distanceToTop = rect.top;
+    //     if (distanceToTop >= 0) {
+    //         navTab.value = element.value
+    //         break;
+    //     }
+
+    // }
+}
+
 const screenroll = () => {
     window.scrollTo({
         top: 0,