rrj-astra-ui 1.1.4 → 1.1.5

package/components/AuiListItem.vue

@@ -27,11 +27,12 @@
 
 <script setup>
 import { defineProps, ref, onMounted, onUnmounted } from 'vue';
-const __name = 'AuiListItem';
+const __name = 'AuiListItem'; // 保留__name，不删除
 
 defineOptions({
     name: __name
 })
+
 const props = defineProps({
     text: {
         type: String,
@@ -55,24 +56,28 @@ const startX = ref(0);
 const offsetX = ref(0);
 const isSliding = ref(false);
 const SLIDE_THRESHOLD = -50;
-// 新增：获取组件 DOM 引用
 const listItemRef = ref(null);
 
-// 原有滑动逻辑（不变）
+// 原有滑动逻辑优化：增加防止过度右滑
 const onTouchStart = (e) => {
     if (!props.allowSlide) return;
+    // 先收回其他可能展开的项（通过全局事件通知）
+    uni.$emit('auiListItem:resetAllSlide');
     startX.value = e.touches[0].clientX;
-    offsetX.value = 0;
-    isSliding.value = false;
+    // 保留当前已有偏移（如果已经展开，再次触摸不重置偏移）
+    const currentOffset = offsetX.value;
+    offsetX.value = currentOffset;
+    isSliding.value = currentOffset === -150;
 };
 
 const onTouchMove = (e) => {
     if (!props.allowSlide) return;
     const currentX = e.touches[0].clientX;
     const diffX = currentX - startX.value;
-    if (diffX < 0) {
-        offsetX.value = diffX;
-        if (diffX < SLIDE_THRESHOLD) {
+    // 只允许左滑（diffX < 0），且偏移不小于-150（最大左滑距离）
+    if (diffX < 0 && (offsetX.value + diffX) >= -150) {
+        offsetX.value = diffX + (isSliding.value ? -150 : 0);
+        if (offsetX.value < SLIDE_THRESHOLD) {
             isSliding.value = true;
         }
     }
@@ -81,60 +86,67 @@ const onTouchMove = (e) => {
 const onTouchEnd = () => {
     if (!props.allowSlide) return;
     if (offsetX.value < SLIDE_THRESHOLD) {
+        // 展开：固定偏移到-150
         offsetX.value = -150;
+        isSliding.value = true;
     } else {
-        offsetX.value = 0;
-        isSliding.value = false;
+        // 收回：重置偏移和状态
+        resetSlide();
     }
 };
 
-// 新增：收回滑动区域的核心方法
+// 核心：收回当前项的滑动状态
 const resetSlide = () => {
-    if (!props.allowSlide || !isSliding.value) return;
+    if (!props.allowSlide) return;
     offsetX.value = 0;
     isSliding.value = false;
 };
 
-// 新增：监听页面点击事件，判断是否点击组件外部
+// 监听全局事件：收回所有列表项的滑动状态（解决多个项同时展开）
+const handleResetAllSlide = () => {
+    resetSlide();
+};
+
+// 优化：页面点击/触摸外部判断（移除重复监听，保留uni-app内置方法更稳定）
 const handlePageClick = (e) => {
     if (!listItemRef.value || !isSliding.value) return;
     
-    // 获取组件 DOM 信息
     const itemDom = listItemRef.value;
     const itemRect = itemDom.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();
     }
 };
 
-// 新增：挂载时添加页面点击监听，卸载时移除（防止内存泄漏）
 onMounted(() => {
-    // 监听 uni-app 页面点击（兼容移动端/PC端）
-    uni.onClickOutside(listItemRef, resetSlide); // 优先使用 uni-app 内置方法（更简洁）
-    // 备用：监听 window 点击（兼容更多场景）
+    // 1. 优先使用uni-app内置外部点击监听（更适配uni-app生态，无重复）
+    uni.onClickOutside(listItemRef, resetSlide);
+    // 2. 监听全局事件，用于收回所有项
+    uni.$on('auiListItem:resetAllSlide', handleResetAllSlide);
+    // 3. 备用：window点击监听（兼容PC端和部分特殊场景）
     window.addEventListener('click', handlePageClick);
     window.addEventListener('touchstart', handlePageClick);
 });
 
 onUnmounted(() => {
-    // 移除监听，防止内存泄漏
+    // 移除所有监听，防止内存泄漏
     uni.offClickOutside(listItemRef, resetSlide);
+    uni.$off('auiListItem:resetAllSlide', handleResetAllSlide);
     window.removeEventListener('click', handlePageClick);
     window.removeEventListener('touchstart', handlePageClick);
 });
 </script>
 
-<!-- 样式部分不变，保留你的原有样式 -->
 <style scoped lang="scss">
 @import '../style.scss';
 .aui-list-item {
@@ -147,9 +159,8 @@ onUnmounted(() => {
 }
 .aui-list-item-content-wrapper {
     display: flex;
-//    align-items: center;
     width: 100%;
-    transition: transform 0.3s;
+    transition: transform 0.3s; /* 平滑过渡，提升体验 */
 }
 .aui-list-item_befor {
     margin:0 10px; 
@@ -179,7 +190,7 @@ onUnmounted(() => {
     right: 0;
     top: 0;
     bottom: 0;
-    width: 150px; /* 自定义内容宽度 */
+    width: 150px; /* 与左滑偏移-150对应 */
     background-color: #f0f0f0;
     display: flex;
     align-items: center;

package/package.json

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