讲师中心 微信公众号
AI工具推荐 视频效率加速

uni-app实现列表滑动删除 uni-app使用uni-swipe-action组件

千晨同学_7778

千晨同学_7778

发布时间:2026-05-23 08:19:45

|

546人浏览过

|

来源于php中文网

原创

uni-swipe-action在H5和小程序平台表现不一致:H5依赖CSS transform易卡顿、回弹异常、iOS微信不响应;需设固定高度、禁用flex:1/height:100%;删除须splice数据并用item.id作key;多swipe-item时需禁用滑动返回;自定义按钮需用.uni-swipe-content类和flex布局。

uni-app实现列表滑动删除 uni-app使用uni-swipe-action组件

uni-swipe-action 在 H5 和小程序平台表现不一致

uni-swipe-action 是 uni-app 官方提供的滑动删除组件,但它在不同平台的底层实现差异很大:H5 上靠 CSS transform 模拟,小程序则调用原生 swiper 或 movable-area。这导致常见问题包括:H5 上滑动卡顿、手指松开后回弹异常、iOS 微信浏览器里完全不响应触摸。

实操建议:

  • 必须为 <uni-swipe-action></uni-swipe-action> 的直接子元素(即 <uni-swipe-action-item></uni-swipe-action-item>)设置固定高度,例如 height: 80rpx,否则 H5 端无法正确计算滑动边界
  • 避免在 <uni-swipe-action-item></uni-swipe-action-item> 内使用 flex: 1 或 height: 100% 布局,会破坏内部 touch 事件捕获区域
  • 真机调试优先选微信开发者工具或 iOS Safari —— H5 浏览器模拟器常误判 touchstart 事件

删除按钮点击后列表数据没更新或索引错乱

这是最常被忽略的逻辑陷阱:滑动删除只是视觉交互,@click 回调里不手动 splice 或 filter 数据,UI 就不会变;更糟的是,如果用 v-for 的 index 作为唯一 key,删除某一项后后续项的 index 改变,可能导致状态错绑(比如删了第 2 条,第 3 条的开关状态被误认为是第 2 条的)。

实操建议:

  • 删除回调中必须显式修改原始数组,例如:this.list.splice(index, 1),不能只改 item.isDeleted = true
  • v-for 必须用稳定唯一标识作 key,例如 :key="item.id",禁用 :key="index"
  • 如果删除涉及接口请求,建议先 splice,再发请求;失败时再 unshift 或 push 恢复,避免 UI 卡在“半删除”状态

多个 swipe-item 共存时手势冲突:左滑打开菜单,右滑却触发返回

在页面级启用 enablePullDownRefresh 或使用 uni.navigateTo 后,部分安卓手机(尤其华为 EMUI)会把右滑手势识别为「返回上一页」,与 uni-swipe-action 的右滑操作冲突,结果就是 swipe-item 拉不开,直接退出当前页。

uni-app
uni-app

uni-app 是基于 Vue 的跨端开发框架,适合开发 H5、App、小程序、鸿蒙和多端业务应用。

下载

实操建议:

  • 在 pages.json 中关闭对应页面的下拉刷新和滑动返回:"enablePullDownRefresh": false,"disableScroll": true(后者可防页面级滚动干扰)
  • 给 <uni-swipe-action></uni-swipe-action> 添加 :disabled="false" 显式启用,避免父容器 overflow: hidden 或 pointer-events: none 意外拦截 touch 事件
  • 如需保留右滑返回,可在 onLoad 中调用 uni.hideHomeButton() 并提示用户「请使用顶部返回按钮」,主动规避手势竞争

自定义删除按钮图标和文字对齐失效

官方文档说支持 slot 插入按钮,但实际中常出现文字偏上、图标大小不一、点击热区过小等问题。根本原因是 uni-swipe-action-item 内部用绝对定位包裹 slot,默认未重置 line-height 和 vertical-align。

实操建议:

  • slot 内容器必须加 class="uni-swipe-content"(官方类名),并设 display: flex; align-items: center; justify-content: center;
  • 图标用 <uni-icons></uni-icons> 而非 img 标签,尺寸统一设为 size="24",避免因图片加载延迟导致布局抖动
  • 按钮文字字号建议用 font-size: 28rpx,小于 24rpx 在 iPhone 上易被系统缩放裁切

复杂点在于 swipe-action 的动画依赖内部 transformX 计算,任何外部 margin、padding 或未闭合的 flex 布局都可能让 getBoundingClientRect() 获取的宽度失准 —— 这类问题只能靠真机反复测滑动临界值,模拟器看不出。

热门AI工具

更多
Lovart
Lovart Hot

一款面向视觉设计创作的AI设计平台,可通过智能体和画布工作流辅助制作海报、Logo、网页、PPT及其他视觉内容。

讯飞智作

讯飞智作是一款AI视频创作工具,AI文本配音工具,数字人课程、营销视频制作。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

UP简历
UP简历 Hot

一款AI办公效率工具,主要用于基于AI技术的免费在线简历制作工具,适合需要提升相关任务效率的用户。

火山引擎

火山引擎是一款面向企业的云计算与AI服务平台。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

Loomy
Loomy Hot

一款AI工具,主要用于科大讯飞发布的桌面级 AI 助理,比 OpenClaw 更易用、更安全!,适合需要提升相关任务效率的用户。

墨刀AI
墨刀AI Hot

一款AI图像与设计工具,主要用于产品经理的专属智能体,适合需要提升相关任务效率的用户。

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2823

2023.08.11

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

6143

2023.10.09

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

7070

2024.03.19

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

6878

2024.03.22

前端外包工作内容有哪些
前端外包工作内容有哪些

前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

983

2024.05.22

C语言变量命名
C语言变量命名

c语言变量名规则是:1、变量名以英文字母开头;2、变量名中的字母是区分大小写的;3、变量名不能是关键字;4、变量名中不能包含空格、标点符号和类型说明符。php中文网还提供c语言变量的相关下载、相关课程等内容,供大家免费下载使用。

3649

2023.06.20

c语言入门自学零基础
c语言入门自学零基础

C语言是当代人学习及生活中的必备基础知识,应用十分广泛,本专题为大家c语言入门自学零基础的相关文章,以及相关课程,感兴趣的朋友千万不要错过了。

2448

2023.07.25

c语言运算符的优先级顺序
c语言运算符的优先级顺序

c语言运算符的优先级顺序是括号运算符 > 一元运算符 > 算术运算符 > 移位运算符 > 关系运算符 > 位运算符 > 逻辑运算符 > 赋值运算符 > 逗号运算符。本专题为大家提供c语言运算符相关的各种文章、以及下载和课程。

1380

2023.08.02

Docker Desktop怎么设置端口映射
Docker Desktop怎么设置端口映射

本专题聚焦Docker Desktop容器端口映射与访问配置,整理从创建容器、设置端口绑定到验证本地服务访问的操作流程。针对端口被占用、映射配置错误、容器服务无法访问等情况,也提供相应的检查方向,方便用户完成端口配置。

0

2026.11.03

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
uni-app从入门到实战教程
uni-app从入门到实战教程

共0课时 | 0人学习

uni-app x harmony开发指南
uni-app x harmony开发指南

共0课时 | 0人学习

uni-app鸿蒙运行和发行
uni-app鸿蒙运行和发行

共0课时 | 0人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn