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

pages/nearby/nearby.vue

@@ -13,8 +13,20 @@
                 <view class="head-item" :class="{ actived: state.current === 3 }" @click="changeType(3)">商圈附近</view>
             </view>
             <view class="nearby-content">
-                <swiper class="swiper" :current="state.current" @change="changeSwiperType">
-                    <swiper-item class="swiper-item" v-for="(_, index) in 4" :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 4"
+                        :key="index"
+                    >
                         <!-- #ifndef MP-WEIXIN -->
                         <component :is="components[index]" :ref="(el) => handelComponentsRef(el, index)" />
                         <!-- #endif -->
@@ -49,6 +61,11 @@ const showFilter1 = ref(false);
 const showFilter2 = ref(false);
 const showFilter3 = ref(false);
 
+const disableTouch = ref(false);
+const startPointX = ref(0);
+const totalPage = 4;
+const THRESHOLD = 5;
+
 const state = reactive({
     current: 0,
     all: [{}],
@@ -63,11 +80,72 @@ const handelComponentsRef = (el, index) => {
         swiperRefs[index].value = el;
     }
 };
+
+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;
+}
+
 // 查看消息类型
 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;