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

pages/index/index.vue

@@ -3,8 +3,21 @@
         <view class="app-container">
             <!-- 主体内容区域 -->
             <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
+                        @touchstart.passive="handleTouchStart"
+                        @touchmove.passive="handleTouchMove"
+                        @touchend="disableTouch = false"
+                        class="swiper-item"
+                        v-for="(_, index) in 2"
+                        :key="index"
+                    >
                         <!-- #ifndef MP-WEIXIN -->
                         <component
                             :is="components[index]"
@@ -58,6 +71,11 @@ const { unreadCount } = storeToRefs(useReadMsg());
 const showTabbar = ref(true);
 const maskFristEntry = ref(false);
 
+const disableTouch = ref(false);
+const startPointX = ref(0);
+const totalPage = 2;
+const THRESHOLD = 5;
+
 onLoad(() => {
     // 判断浏览器是否有 fristEntry 第一次进入
     let fristEntry = uni.getStorageSync('fristEntry') === false ? false : true; // 默认未读
@@ -85,15 +103,69 @@ const handelComponentsRef = (el, index) => {
     }
 };
 
+function handleTouchStart(e) {
+    startPointX.value = e.touches[0].clientX;
+    disableTouch.value = false;
+}
+function handleTouchMove(e) {
+    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;
+}
+
 function changeShowTabbar(val) {
     showTabbar.value = val;
 }
 
 //1  查看消息类型
 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;