微信小程序 滑动删除

最新推荐文章于 2024-07-17 17:22:13 发布
最新推荐文章于 2024-07-17 17:22:13 发布
阅读量949 收藏 6
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weibaobao1314/article/details/107944300
版权
本文介绍了如何利用vant UI框架在微信小程序中实现滑动删除效果。通过引入'van-swipe-cell'组件，并结合vant提供的操作方法，轻松完成滑动删除功能。
摘要由CSDN通过智能技术生成

滑动效果 和删除 操作

在这里插入图片描述
vant ui 框架地址 https://youzan.github.io/vant/#/zh-CN/

这个是一个vant 框架 做的

vatn 微信小程序 滑动删除的vant 框架地址
[添加链接描述] https://youzan.github.io/vant/#/zh-CN/

1：在vant上面引入 “van-swipe-cell”: “@vant/weapp/swipe-cell/index”,

"usingComponents": {
   
    "van-icon": "@vant/weapp/icon/index", 
    "wrkPopup": "/components/wrkPopup/wrkPopup",
    "van-swipe-cell": "@vant/weapp/swipe-cell/index",
    "van-dialog": "@vant/weapp/dialog/index"
   
  },

2：vant里面的滑动的操作方法直接使用
<van-swipe-cell right-width="{ {65}}" left-width={ {14}}">

	<van-swipe-cell right-width="{
   {65}}" left-width="{
   {14}}">
		<van-cell-group>
			<!-- img 内容 -----button 价格的大盒子 -->
			<view class="wrk_img">
				<
最低0.47元/天 解锁文章
weibaobao1314
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序滑动删除功能
04-26
微信小程序右边滑动删除代码，找了很久，这是兼容性最好的
vant移动端 怎么实现点击SwipeCell面板实现右滑
2301_79134928的博客
02-20 710
需求：点击点击SwipeCell面板实现右滑vant2文档，可以调用实例的open方法，传参，‘left’ 'right’。发现传参后，根本没用效果还会报错。查看官方ISSUS后，得到了解决办法。传入事件对象，阻止事件冒泡，再配合open使用，就可以点击滑动。
微信小程序 vant-weapp的 SwipeCell 滑动单元格 van-swipe-cell 滑动单元格不显示 和 样式问题 滑动后删除样式不显示
最新发布
weixin_44166849的博客
07-17 643
微信小程序 vant-weapp的 SwipeCell 滑动单元格 van-swipe-cell 滑动单元格不显示 和 样式问题 滑动后删除样式不显示
vant组件van-swipe-cell中的滑动删除功能（数据的删除功能）
laowang357的博客
02-17 3294
vant组件van-swipe-cell中的滑动删除功能（数据的删除功能）绑定要删除的数据，然后获取并删除
微信小程序安装 Vant 组件库与API Promise组件库并通过它们实现简单的增删改查
liulala16的专栏
01-10 1034
vant api-promise
微信小程序 — WeUI slideview 左滑删除（二）
棒怡情的专栏
08-20 780
WeUi slideview左滑菜单。设置同一时间只能有一个列表显示左滑菜单。其它列表收齐。 bindshow
微信小程序向左滑动删除操作（类仿微信、QQ）
祈澈菇凉
12-07 1616
上一个小程序的项目里面做过这个功能，当时没有记录下来，今天特意做了一个小的demo放在了github上面，下次在开发中遇到的话就可以直接拿下来代码复用了。效果很简单，类似于微信扣扣删除聊天栏的效果，想左滑动，出现删除按钮，点击即可删除。 github地址：https://github.com/wangxiaoting666/swipeleft-delete...
微信小程序滑动删除页面
04-10
总之，微信小程序中的滑动删除功能需要结合JS逻辑、页面结构、样式和事件监听来实现。通过合理地组合和配置这四个基本文件，我们可以创建出符合需求的交互页面。在实际开发过程中，还需注意性能优化，避免因大量数据...
微信小程序实现滑动删除效果
01-03
遗憾的是小程序中目前没有像Android中快速滑动事件，所以，要实现惯性滑动是不可能了。 item的布局： 推荐小程序优先使用flex布局，完全够用。这也是微信推荐的。 <view wx:for={{cardTeams}} wx:for-item=...
微信小程序 按钮滑动的实现方法
12-29
微信小程序 按钮滑动的实现方法 一.先看东西 滑动前 滑动后 二.再上代码 index.wxml <input placeholder=验证码 placeholder-class=input-placeholder disabled={{disabled}} /> <view class=...
微信小程序 实现列表项滑动显示删除按钮的功能
01-03
微信小程序 实现列表项滑动显示删除按钮的功能 微信小程序并没有提供列表控件，所以也没有iOS上惯用的列表项左滑删除的功能，SO只能自己干了。 原理很简单，用2个层，上面的层显示正常的内容，下面的层显示一个删除...
weixin-wepy-swipe-delete-微信小程序-wepy-侧滑删除组件-支持之定义内容区域.zip
09-23
微信小程序-wepy-侧滑删除组件，支持自定义内容区在最近的微信小程序开发过程中需要用到侧滑删除的功能，微信小程序官方是没有提供这样的组件，再加上我们的微信小程序使用的是wepy组件开发框架开发的，wepy也没有提供这样的组件，之前也在github上搜索这方面的组件，没有发现合适的，当时只发现了一个开源的:https://github.com/GeoffZhu/wepy-swipe-delete 只不过该组件功能单一已经被作者废弃了，无奈自己动手撸了一个侧滑删除组件，现在把它开源出来吧。Requirementswepy: "^1.7.3"支持功能和特点自定义内容区域：支持之定义内容区域，组件内使用 slot占位。自定义滚动高度：可以自定义scroll-view的高度，默认为屏幕的高度。自定义menu ：如果默认的menu样式不喜欢可以自定义，也可以显示或者隐藏指定的menu。左右滑动：支持左右滑动也可以设置只左右或者右滑。效果如下：       如何使用目前支持两种使用模式：1.page页面模式优点：可定制化高，扩展性强。 缺点：集成复杂，代码复用性差。2.component 组件模式优点：集成简单，代码复用性强，减少包的大小。 缺点：可定制到低。不建议使用page页面模式，下面详细介绍component 组件模式的使用如何使用// 导入组件import SwipeDeleteView from '@/components/wepy-swipe-delete-view'// 声明组件  components = {       swipeDelete: SwipeDeleteView     }       // 引用组件   <template>   <swipeDelete :list.sync="list">       <view class="item">{{item.userName}}</view>     </swipeDelete>   </template>配置如下：<swipeDelete   :list.sync="list"                :scrollHeight="scrollHeight"                @deleteTap.user="deleteTap"                @deleteLongTap.user="deleteLongTap"                @editTap.user="editTap"                @editLongTap.user="editLongTap"                @addTap.user="addTap"                @addLongTap.user="addLongTap"                @markTap.user="markTap"                @markLongTap.user="markLongTap">属性属性说明备注list要显示的列表的原始数据，最好是加上.sync这样可以异步传值必传scrollHeight设置scroll-view的高度，默认为屏幕高度选传deleteTap.user删除menu单击事件回调必要时传deleteLongTap.user删除menu长按事件回调必要时传editTap.user编辑menu单击事件回调必要时传editLongTap.user编辑menu长按事件回调必要时传addTap.user添加menu单击事件回调必要时传addLongTap.user添加menu长按事件回调必要时传markTap.user标记menu单击事件回调必要时传markLongTap.user标记menu长按事件回调必要时传每个点击事件或者长按事件都会返回两个参数methods = {       deleteTap(view, item) {         console.log(item)         view.deleteItem()       },       deleteLongTap(view, item) {         console.log(item)         wx.showModal({           title: '提示',           content: '确定要删除吗？',           success: function (res) {             if (res.confirm) {               view.deleteItem()             } else {               view.closeItem()             }           }         })       }    }view ：view 是SwipeDeleteView对象的本身，可以通过view来做一些其他操作，如:删除当前的itemitem : item 就是当前操作的原始数据，可以通过item获取真正需要的数据当前SwipeDeleteView对外暴露的函数有：函数名称函数说明参数deleteItem删除当前操作的item(原始数据 view)都会被删除不需要参数closeItem关闭当前操作的item，原始数据不变不需要参数网络异步加载更新如果使用的网络异步加载完成以后，还需要更新下组件，不然会出现无法侧滑的情况。导致原因：原始数据更新以后组件内部无法监听到，这样就不能获取到左右menu的宽度，所以不能侧滑解决办法：this.$invoke('swipeDelete', 'update'); swipeDelete必须和 components = {swipeDelete: SwipeDeleteView} 同名。代码如下：// 模拟网络加载延迟2秒钟    let that = this      setTimeout(function () {        for (let i = 0; i < 20; i ) {          let msg = {}          msg.userName = ''   '用户'   (i   1)          msg.msgText = '您有新的消息'          msg.color = that.buildRandomColor()          msg.height = that.buildRandomHeight()          msg.headerImg = options.avatarUrl          that.list.push(msg)        }        wx.hideLoading()        // 更新组件        that.$invoke('swipeDelete', 'update')        that.$apply()      }, 2000)
swipelistview左滑删除
07-07
swipelistview仿微信左测滑动删除
「VUE架构」vue 实现购物车列表右滑删除功能
AIGC大前端小王子
01-06 847
本文主要实现购物车列表右滑删除功能。 一、购物车页面cart.vue 侧滑按钮宽度0.6rem,如果需要体验感好点的可以加个动画属性。 <template> <div> <nav-header :showBackBtn="false" @handleBtnClick="goList('searchList')"> <span slot="title">购物车</span> </nav-header&gt.
vue ---- 实现手机端（左滑 删除。右划 正常）
weixin_33831196的博客
02-05 1107
touchstart: // 手指放到屏幕上的时候触发 touchmove: // 手指在屏幕上移动的时候触发 touchend: // 手指从屏幕上拿起的时候触发 touchcancel: // 系统取消touch事件的时候触发。至于系统什么时候会取消，不详 client / clientY：// 触摸点相对于浏览器窗口view...
vant小程序SwipeCell 完美解决滑动单元格右滑无样式
qq_34810951的博客
11-04 1820
vant小程序SwipeCell 完美解决滑动单元格右滑无样式解决方案结果 这个bug是比较坑人的！ 直接引入后发现右滑无样式 代码如下： <van-swipe-cell right-width="{{ 65 }}"> <van-checkbox name="a" label-class="car-product-item-cell"> <van-card price="2.00" desc="描述信息" title="商品标题" thumb="https://
Vue3+Vite+Vant3 购物车（单选全选，数量增减，金额计算，左滑删除，空状态，结算跳转）
weixin_62918410的博客
11-07 2332
无接口，本地缓存存储购物车数据——单选全选，数量增减，金额计算，左滑删除，空状态，结算跳转
van-swipe插件里面无法引入自定义组件问题
Blablabla_的博客
11-08 1322
问题描述：一开始把van-swipe里面的元素直接替换为自定义的组件报错，原因是van-swipe要实现轮播效果必须要van-swipe-item一起使用。 解决办法：可以在van-swipe-item里面引入自定义的组件（components）：vipSwipe。代码如下: <van-swipe :loop="false" @change="onChange"> &l...
微信小程序滑动删除效果
weixin_41538490的博客
01-07 548
微信小程序较为完美的滑动删除效果，movable-view欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart...
微信小程序滑动删除优化：morable-view实战与问题解决
本文主要介绍了如何在微信小程序中利用`movable-view`组件实现滑动删除功能，解决常见的滑动交互问题。作者首先提到了在尝试其他方法时遇到的不尽如人意之处，然后转向了官方推荐的滑动组件。文章的核心内容围绕以下...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值