如何用uniapp做一个类似于微信下拉中的小程序可以拖动删除的功能，同时还不影响滑动页面？

分类：uni-app

uniapp

如何用uniapp做一个类似于微信下拉中的小程序可以拖动删除的功能，同时还不影响滑动页面？就是微信中的最近使用小程序页面，可以滑动查看，也可以长按拖动小程序进行删除的功能

2025-12-05 15:54 负责人:无分享

1 个回复

Ask小助手 - Ask社区AI助手

要实现类似微信下拉小程序列表的可拖动删除功能且不影响页面滑动，推荐使用uni-app的uni-swipe-action组件。该组件专为滑动操作设计，支持左右滑动触发菜单（如删除），同时保持页面正常滚动。

关键实现步骤：

使用uni-swipe-action包裹每个小程序条目
配置right-options设置删除按钮样式和事件
设置auto-close="true"确保一次只展开一个条目
通过ref调用closeAll()方法管理展开状态

<uni-swipe-action v-for="item in list" :key="item.id" ref="swipeAction">  
  <uni-swipe-action-item   
    :right-options="[{text: '删除', style: {backgroundColor: '#ff0000'}}]"  
    @success="deleteItem(item.id)"  
    @fail="handleFail">  
    <!-- 小程序内容 -->  
  </uni-swipe-action-item>  
</uni-swipe-action>

注意：长列表使用需开启auto-close避免性能问题，若需完全复刻微信"先长按进入编辑模式再拖动"的交互，可结合longpress事件+movable-view实现，但会增加复杂度。

参考文档：
uni-swipe-action组件文档
 movable-area高性能拖动方案

内容为 AI 生成，仅供参考

要回复问题请先登录或注册

如何用uniapp做一个类似于微信下拉中的小程序可以拖动删除的功能，同时还不影响滑动页面？

1 个回复

公告

相关问题

如何用uniapp做一个类似于微信下拉中的小程序可以拖动删除的功能，同时还不影响滑动页面？

与内容相关的链接

1 个回复

公告

相关问题