rrj-astra-ui 1.1.13 → 1.1.15

package/components/AuiListItem.vue

@@ -1,10 +1,12 @@
 <template>
     <view class="aui-list-item" ref="listItemRef">
+        <!-- 给外层加 touchable 确保触摸事件触发（uni-app 小程序端兼容） -->
         <view class="aui-list-item-content-wrapper" 
               :style="{ transform: `translateX(${offsetX}px)` }" 
               @touchstart="onTouchStart" 
               @touchmove="onTouchMove" 
-              @touchend="onTouchEnd">
+              @touchend="onTouchEnd"
+              touch-action="pan-x"> <!-- 明确支持水平滑动 -->
             <view class="aui-list-item_befor">
                 <slot name="befor"></slot>
             </view>
@@ -30,8 +32,8 @@
 </template>
 
 <script setup>
-import { defineProps, ref, onMounted, onUnmounted, nextTick } from 'vue';
-const __name = 'AuiListItem'; // 保留__name，无改动
+import { defineProps, ref, onMounted, onUnmounted } from 'vue';
+const __name = 'AuiListItem';
 
 defineOptions({
     name: __name
@@ -44,159 +46,78 @@ const props = defineProps({
     allowSlide: { type: Boolean, default: true }
 });
 
-// 组件内部状态
+// 滑动核心变量（无任何额外变量）
 const startX = ref(0);
 const offsetX = ref(0);
 const isSliding = ref(false);
 const SLIDE_THRESHOLD = -50;
 const listItemRef = ref(null);
-// 标记当前组件是否已展开
-const isOpened = ref(false);
 
-// ########## 验证通过的核心：遍历所有列表项，收回已展开的（除了当前项） ##########
-const closeAllOpenedItems = (currentDom) => {
-    // 找到所有aui-list-item组件DOM
-    const allItems = document.querySelectorAll('.aui-list-item');
-    if (!allItems || allItems.length === 0) return;
-    
-    allItems.forEach(item => {
-        // 跳过当前正在触摸的项
-        if (item === currentDom) return;
-        
-        // 找到子元素的偏移量和状态
-        const contentWrapper = item.querySelector('.aui-list-item-content-wrapper');
-        if (!contentWrapper) return;
-        
-        // 强制重置偏移和状态（直接操作DOM+组件内部状态）
-        contentWrapper.style.transform = 'translateX(0px)';
-        // 找到对应的组件实例（通过DOM绑定的属性）
-        const itemInstance = item.__auiListItemInstance;
-        if (itemInstance) {
-            itemInstance.offsetX.value = 0;
-            itemInstance.isSliding.value = false;
-            itemInstance.isOpened.value = false;
-        }
-    });
-};
-
-// 触摸开始：先收回其他项，再执行原有逻辑
+// ########## 最纯粹的滑动逻辑（无任何联动，保证能滑） ##########
 const onTouchStart = (e) => {
     if (!props.allowSlide) return;
-    if (!listItemRef.value) return;
-    
-    // ########## 第一步：先收回所有其他已展开的项（核心联动，验证生效） ##########
-    closeAllOpenedItems(listItemRef.value);
+    // 强制获取触摸点（兼容uni-app 小程序端触摸事件格式）
+    const touch = e.touches || e.changedTouches;
+    if (!touch || touch.length === 0) return;
     
-    // 原有逻辑，无改动
-    startX.value = e.touches[0].clientX;
+    startX.value = touch[0].clientX;
     offsetX.value = 0;
     isSliding.value = false;
-    isOpened.value = false;
 };
 
-// 触摸移动：完全保留你的原有逻辑，右滑恢复正常
 const onTouchMove = (e) => {
     if (!props.allowSlide) return;
-    const currentX = e.touches[0].clientX;
+    // 强制获取触摸点（兼容uni-app 小程序端）
+    const touch = e.touches || e.changedTouches;
+    if (!touch || touch.length === 0) return;
+    
+    const currentX = touch[0].clientX;
     const diffX = currentX - startX.value;
     
-    // 左滑逻辑
+    // 左滑逻辑（正常更新偏移）
     if (diffX < 0) {
         offsetX.value = diffX;
         if (diffX < SLIDE_THRESHOLD) {
             isSliding.value = true;
         }
     }
-    // 右滑恢复逻辑（你的原有逻辑，正常生效）
+    
+    // 右滑逻辑（正常重置）
     if (diffX > 0) {
         offsetX.value = 0;
         isSliding.value = false;
-        isOpened.value = false;
     }
 };
 
-// 触摸结束：保留原有逻辑，绑定组件实例到DOM
 const onTouchEnd = () => {
     if (!props.allowSlide) return;
-    if (!listItemRef.value) return;
-    
-    // 原有逻辑，无改动
+    // 纯粹的滑动结束定位（无任何额外逻辑）
     if (offsetX.value < SLIDE_THRESHOLD) {
         offsetX.value = -150;
         isSliding.value = true;
-        isOpened.value = true; // 标记当前项已展开
     } else {
         offsetX.value = 0;
         isSliding.value = false;
-        isOpened.value = false;
     }
-    
-    // ########## 绑定组件实例到DOM，供其他项收回时调用（验证生效） ##########
-    listItemRef.value.__auiListItemInstance = {
-        offsetX,
-        isSliding,
-        isOpened
-    };
 };
 
-// 重置方法：保留原有逻辑，验证生效
+// 简单重置方法
 const resetSlide = () => {
     if (!props.allowSlide) return;
     offsetX.value = 0;
     isSliding.value = false;
-    isOpened.value = false;
 };
 
-// 外部点击：保留你的原有逻辑，正常生效
-const handlePageClick = (e) => {
-    if (!listItemRef.value || !isSliding.value) return;
-    
-    const itemRect = listItemRef.value.getBoundingClientRect();
-    const clickX = e.clientX || e.touches?.[0]?.clientX;
-    const clickY = e.clientY || e.touches?.[0]?.clientY;
-    
-    if (
-        clickX < itemRect.left ||
-        clickX > itemRect.right ||
-        clickY < itemRect.top ||
-        clickY > itemRect.bottom
-    ) {
-        resetSlide();
-    }
-};
-
-// 挂载：绑定监听+DOM实例，验证生效
+// 仅保留必要的外部点击收回（无多余监听）
 onMounted(() => {
-    if (!listItemRef.value) return;
-    
-    // 保留你的原有监听
     uni.onClickOutside(listItemRef, resetSlide);
-    window.addEventListener('click', handlePageClick);
-    window.addEventListener('touchstart', handlePageClick);
-    
-    // 绑定组件实例到DOM
-    listItemRef.value.__auiListItemInstance = {
-        offsetX,
-        isSliding,
-        isOpened
-    };
 });
 
-// 卸载：清理监听+DOM实例，验证生效
 onUnmounted(() => {
-    if (!listItemRef.value) return;
-    
-    // 保留你的原有清理
     uni.offClickOutside(listItemRef, resetSlide);
-    window.removeEventListener('click', handlePageClick);
-    window.removeEventListener('touchstart', handlePageClick);
-    
-    // 清理DOM上的组件实例，避免内存泄漏
-    delete listItemRef.value.__auiListItemInstance;
 });
 </script>
 
-<!-- 样式部分：完全保留你的原有代码，验证生效 -->
 <style scoped lang="scss">
 @import '../style.scss';
 .aui-list-item {
@@ -206,12 +127,18 @@ onUnmounted(() => {
     border-bottom: 1px solid #F3F4F6;
     position: relative;
     overflow: hidden;
+    /* 确保容器能接收触摸事件 */
+    touch-action: pan-x;
+    pointer-events: auto;
 }
 .aui-list-item-content-wrapper {
     display: flex;
-//    align-items: center;
     width: 100%;
-    transition: transform 0.3s;
+    transition: transform 0.3s ease; /* 顺滑过渡，保证滑动视觉正常 */
+    /* 确保内容区能接收触摸事件 */
+    touch-action: pan-x;
+    pointer-events: auto;
+    transform: translateX(0px); /* 初始偏移 */
 }
 .aui-list-item_befor {
     margin:0 10px; 
@@ -241,7 +168,7 @@ onUnmounted(() => {
     right: 0;
     top: 0;
     bottom: 0;
-    width: 150px; /* 自定义内容宽度 */
+    width: 150px;
     background-color: #f0f0f0;
     display: flex;
     align-items: center;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rrj-astra-ui",
-  "version": "1.1.13",
+  "version": "1.1.15",
   "description": "AstraUI - A powerful UI framework for UniApp with global SCSS color variables",
   "main": "index.js",
   "keywords": [