小程序实现滑动删除

已于 2023-06-29 11:30:52 修改
阅读量2.9k 收藏 29
点赞数 16
分类专栏： 微信小程序 文章标签： js javascript html 小程序 滑动删除
于 2020-10-19 11:10:01 首次发布
本文为博主原创文章，未经博主允许不得转载。
本文链接：https://blog.csdn.net/weixin_42794881/article/details/109156087
版权
微信小程序 专栏收录该内容
73 篇文章 1054 订阅 ¥9.90 ¥99.00
订阅专栏
本文介绍了如何在小程序中实现左滑删除效果，通过两种方式——使用movable-view和Touch事件详细阐述了实现过程，并提供了完整代码示例。同时，文章还提及了拓展开发中的数据库操作和请求说明。
摘要由CSDN通过智能技术生成

随着UI的不断优化，对功能的要求也越来越高。以前可能是直接提供一个删除按钮给用户，但在页面布局上可能看上去有些多余，这篇文章带大家在小程序实现左滑删除效果。

目录

在这里插入图片描述

一、使用movable-view实现

在这里插入图片描述
简单解读一下movable-area标签的基本概念。movable-area标签就是定义了一个可移动的视图容器,支持在页面中拖拽滑动,跟普通的view容器是一样的,但是也有不同之处,movable-area必须设置width和height属性,不设置默认为10px;movable-view 默认为绝对定位,top和left属性为0px。

 	  <movable
了解本专栏 订阅专栏 解锁全文
摔跤猫子
关注
专栏目录
订阅专栏
微信小程序滑动删除功能
04-26
微信小程序右边滑动删除代码，找了很久，这是兼容性最好的
小程序左滑动删除功能
码农的快乐在于分享
05-16 272
<view data-index='{{index}}' bindtouchstart="touchS" bindtouchmove="touchM" bindtouchend="touchE" data-index="{{index}}" class="inner txt" style="{{item.txtStyle}}"></view> ========================= 将上面标签套在需要有左滑删除功能的标签上================== del.
小程序如何滑动删除
articlesection的博客
07-10 264
【代码】小程序如何滑动删除。
微信小程序 滑动删除
weibaobao1314的博客
08-11 959
滑动效果 和删除 操作 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":
【微信小程序】滑动删除最全Demo，touchstart、touchmove的使用
热门推荐
丑小喵的博客
04-20 3万+
微信小程序滑动删除Demo分享
微信小程序实现滑动删除效果
01-03
遗憾的是小程序中目前没有像Android中快速滑动事件，所以，要实现惯性滑动是不可能了。 item的布局： 推荐小程序优先使用flex布局，完全够用。这也是微信推荐的。 <view wx:for={{cardTeams}} wx:for-item=...
微信小程序 向左滑动删除功能的实现
08-31
在上面的代码中，我们使用flex布局和css3动画来实现滑动删除效果，并使用`.touch-move-active`类来控制删除按钮的显示和隐藏。 js实现 在js中，我们需要使用Page对象来处理滑动事件，并使用数据绑定来实现数据的...
微信小程序基于movable-view实现滑动删除效果
10-15
在微信小程序中，为了实现滑动删除的效果，开发者通常会借助特定的组件。在这个案例中，我们使用了`movable-view`组件，它是微信小程序官方提供的一个可移动视图组件，能够实现类似滑动删除这样的交互功能。下面将...
微信小程序-侧滑删除
最新发布
qq_37011724的博客
03-09 1063
movable-view和movable-area是可移动的视图容器，在页面中可以拖拽滑动。本篇文章将会通过该容器实现一个常用的拖拽按钮功能。
小程序侧滑删除
07-06
小程序侧滑删除完全可以使用的~小程序侧滑删除完全可以使用的~
微信小程序实现左滑动删除效果
10-16
主要为大家详细介绍了微信小程序实现左滑动删除效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
微信小程序侧滑删除
02-09
微信小程序侧滑删除demo
小程序左滑删除
12-06
设置触摸起始点水平方向位置，控制手指移动距离最大值为删除按钮的宽度
小程序左滑删除（movable-view）
达拉崩巴斑得贝迪卜多比鲁翁_
04-28 1375
文档: https://developers.weixin.qq.com/miniprogram/dev/component/movable-view.html 效果： 代码实现: wxml <view wx:for="{{items}}" wx:key="{{index}}"> <movable-area class='movable-area'> <movable-view direction="horizontal" class='movable-view'
微信小程序 车轮之 滑动删除
xiaochun365的博客
06-08 523
老样子：原车轮地址： http://www.see-source.com/weixinwidget/detail.html?wid=80上效果图（左侧为原车轮效果图） 两天的零散时间弄这么个破玩意~，做梦都在滑 有什么问题欢迎指正 链接: http://pan.baidu.com/s/1nuRKCpr 密码: dyri
微信小程序左滑效果
聪明的竹子的博客
04-12 1060
html &lt;view class="container"&gt; &lt;view class="touch-item {{item.isTouchMove ? 'touch-move-active' : ''}}" data-index="{{index}}" bindtouchstart="touchstart" bindtouchmove="touchmove&qu
小程序滑动删除
xyc859666356的博客
12-17 95
https://blog.csdn.net/mi_ni123/article/details/80021048?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522163929255216780366525787%2522%252C%2522scm%2522%253A%252220140713.130102334…%2522%257D&request_id=163929255216780366525787&biz_id=0&
微信小程序实现左滑删除
shi450561200的博客
08-14 3416
实现思路使用的是官方提供的。
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

摔跤猫子

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值