flat: 体验优化，swiper优化,添加uploadfile Class方法

pages/msglog/msglog.vue

@@ -15,8 +15,20 @@
 
             <!-- 主体内容区域 -->
             <view class="container-main">
-                <swiper class="swiper" :current="state.current" @change="changeSwiperType">
-                    <swiper-item class="swiper-item" v-for="(_, index) in 2" :key="index">
+                <swiper
+                    class="swiper"
+                    :disable-touch="disableTouch"
+                    :current="state.current"
+                    @change="changeSwiperType"
+                >
+                    <swiper-item
+                        class="swiper-item"
+                        @touchstart.passive="handleTouchStart"
+                        @touchmove.passive="handleTouchMove"
+                        @touchend="disableTouch = false"
+                        v-for="(_, index) in 2"
+                        :key="index"
+                    >
                         <!-- #ifndef MP-WEIXIN -->
                         <component :is="components[index]" :ref="(el) => handelComponentsRef(el, index)" />
                         <!-- #endif -->
@@ -46,6 +58,11 @@ import { storeToRefs } from 'pinia';
 import { useReadMsg } from '@/stores/useReadMsg';
 const { unreadCount } = storeToRefs(useReadMsg());
 
+const disableTouch = ref(false);
+const startPointX = ref(0);
+const totalPage = 2;
+const THRESHOLD = 5;
+
 onShow(() => {
     // 获取消息列表
     useReadMsg().fetchMessages();
@@ -59,6 +76,40 @@ onMounted(() => {
     handleTabChange(state.current);
 });
 
+function handleTouchStart(e) {
+    // 确保有触摸点
+    if (e.touches.length > 0) {
+        startPointX.value = e.touches[0].clientX;
+        disableTouch.value = false;
+    }
+}
+
+function handleTouchMove(e) {
+    if (e.touches.length === 0) return;
+
+    const currentX = e.touches[0].clientX;
+    const diffX = currentX - startPointX.value;
+
+    if (state.current === 0) {
+        if (diffX > THRESHOLD) {
+            disableTouch.value = true;
+        } else {
+            disableTouch.value = false;
+        }
+        return;
+    }
+
+    if (state.current === totalPage - 1) {
+        if (diffX < -THRESHOLD) {
+            disableTouch.value = true;
+        } else {
+            disableTouch.value = false;
+        }
+        return;
+    }
+    disableTouch.value = false;
+}
+
 const handelComponentsRef = (el, index) => {
     if (el) {
         swiperRefs[index].value = el;
@@ -66,9 +117,35 @@ const handelComponentsRef = (el, index) => {
 };
 // 查看消息类型
 function changeSwiperType(e) {
+    const newIndex = e.detail.current;
+    const lastIndex = state.current;
+
+    const isSwipingRight = newIndex < lastIndex;
+    const isSwipingLeft = newIndex > lastIndex;
+
+    if (lastIndex === 0 && isSwipingRight) {
+        disableTouch.value = true;
+        state.current = 0;
+        setTimeout(() => {
+            disableTouch.value = false;
+        }, 50);
+        return;
+    }
+
+    if (lastIndex === totalPage - 1 && isSwipingLeft) {
+        disableTouch.value = true;
+        state.current = lastIndex;
+
+        setTimeout(() => {
+            disableTouch.value = false;
+        }, 50);
+        return;
+    }
+
     const index = e.detail.current;
     state.current = index;
     handleTabChange(index);
+    disableTouch.value = false;
 }
 function changeType(index) {
     state.current = index;