uni-app微信小程序开发：高频核心 API（三）

10. 列表项左右滑动以展示隐藏操作按钮uni-swipe-action出处uni-swipe-action 组件文档用处在移动端开发中屏幕空间寸土寸金。为了在不跳转页面的情况下展示更多操作选项“左滑删除”或“左滑操作”已成为业界标准的交互模式。在 uni-app 生态中uni-swipe-action是实现这一功能的官方推荐组件。它不仅支持左滑还支持右滑且兼容小程序和 App。基本语法uni-swipe-action的结构可以概括为“一个容器多个子项”。uni-swipe-action外层容器充当事件总线的角色用于管理内部所有子项的开关状态。uni-swipe-action-item具体的列表项包裹内容区域和操作按钮区域。核心属性1.uni-swipe-action-item的关键属性right-options右侧按钮配置数组。这是最常用的属性用于定义滑出按钮的文字、样式和图标。数据结构[{ text: 删除, style: { backgroundColor: #dd524d } }]left-options左侧按钮配置数组用法同右。threshold滑动阈值。比如设为100表示滑动超过 100px 才会弹出按钮。disabled是否禁用滑动。2. 事件click当点击按钮时触发回调参数中包含按钮的索引。change当滑动状态变化时触发打开/关闭。基础示例下面实现一个经典的“左滑删除”列表项。template view classcontainer !-- 外层容器用于收起其他已打开的项 -- uni-swipe-action !-- 列表循环 -- uni-swipe-action-item v-for(item, index) in list :keyitem.id :right-optionsoptions clickhandleClick($event, index) changechangeSwipe !-- 正文内容区域 -- view classcontent-box text{{ item.title }}/text text classinfo{{ item.content }}/text /view /uni-swipe-action-item /uni-swipe-action /view /template script export default { data() { return { list: [ { id: 1, title: 消息通知, content: 您有一条新的付款消息 }, { id: 2, title: 系统更新, content: 新版本 v2.0 已发布 } ], // 右侧按钮配置 options: [ { text: 取消, style: { backgroundColor: #C7C6CD } }, { text: 删除, style: { backgroundColor: #DD524D } } ] }; }, methods: { // 点击按钮回调 handleClick(e, index) { const { content } e; // content.text 可以判断点击了哪个按钮 if (content.text 删除) { uni.showModal({ title: 提示, content: 确定删除吗, success: (res) { if (res.confirm) { this.list.splice(index, 1); uni.showToast({ title: 删除成功, icon: success }); } } }); } else if (content.text 取消) { // 关闭当前项的滑动菜单通常通过 ref 调用 close 方法下文详述 console.log(点击取消); } }, // 滑动状态变化 changeSwipe(e) { console.log(当前状态, e.open ? 已打开 : 已关闭); } } }; /script style .content-box { width: 100%; padding: 20rpx 30rpx; background-color: #fff; border-bottom: 1rpx solid #eee; } .info { margin-left: 20rpx; color: #888; font-size: 24rpx; } /style企业开发中的实际应用场景场景一消息中心与邮件列表左滑标为已读这是最常见的场景。用户向左滑动一条消息可以快速“标为已读”、“置顶”或“删除”无需进入详情页操作。// 动态配置 options const msgOptions [ { text: 置顶, style: { backgroundColor: #007AFF } }, { text: 标为已读, style: { backgroundColor: #4CD964 } }, { text: 删除, style: { backgroundColor: #DD524D } } ];场景二购物车与订单管理批量操作在电商 App 的订单列表中左滑订单卡片可以进行“删除订单”或“联系客服”操作。特别之处此时通常需要配合uni-swipe-action的实例方法确保用户滑开一个新的订单时上一个滑开的订单自动关闭避免界面混乱。场景三自定义复杂交互如滑动解锁除了列表操作有些 App 会利用threshold属性实现“滑动解锁”或“滑动确认收款”功能将整个屏幕宽度作为滑动区域滑到底部触发事件。注意事项在使用uni-swipe-action时新手常会遇到以下问题(1) 按钮点击后菜单不自动关闭现象用户点击了“删除”列表更新了但滑动菜单依然处于打开状态或者点击“取消”后菜单没关。解决方案需要通过ref获取组件实例并调用close()方法。uni-swipe-action refswipeAction uni-swipe-action-item refswipeItem.../uni-swipe-action-item /uni-swipe-action// 点击事件中 this.$refs.swipeItem.close(); // 或者关闭所有推荐在列表场景下点击任意按钮后关闭所有 this.$refs.swipeAction.closeAll();(2) 嵌套在scroll-view中的冲突现象当页面也是可滚动时用户想左滑结果手指稍微偏上偏下一点就变成了列表上下滚动导致滑动很难触发。解决uni-swipe-action内部已处理了部分触摸事件冲突。尽量保证滑动区域content-box有一定的高度如 100rpx 以上方便用户操作。如果是在微信小程序端可以使用enable-flex属性开启 flex 布局以兼容部分机型。(3) 样式覆盖问题现象默认的按钮样式如宽度、字体大小不符合设计稿要求。解决不要尝试去修改uni-swipe-action-item内部 class因为它使用了 shadow-dom 或原生组件。请务必通过right-options中的style对象来配置样式例如{ text: 删除, style: { backgroundColor: #DD524D, fontSize: 28rpx, // 仅部分平台支持 width: 100px // 部分平台支持自定义宽度 } }(4) 动态数据更新导致的状态错乱现象在列表中使用v-for循环当删除某一项后新的一项继承了上一项的打开状态。解决确保在删除数据逻辑之前先调用close()关闭菜单或者给uni-swipe-action-item绑定唯一的:key且该 key 在删除操作后保持稳定。