微信小程序左滑删除

最新推荐文章于 2022-08-20 16:50:32 发布
原创 最新推荐文章于 2022-08-20 16:50:32 发布 · 263 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文介绍了一种在微信小程序中实现滑动删除功能的方法。通过封装touch.js，利用flex布局使内容框与删除按钮在同一行显示。当手指触摸屏幕时，两者会一起向左移动删除按钮的宽度，从而实现滑动删除效果。文章详细记录了实现过程，并分享了个人心得。

1、首先封装一个touch.js
在这里插入图片描述
wxml页面
在这里插入图片描述
wxss页面
在这里插入图片描述
在这里插入图片描述
js页面 （记得引入封装的方法 例如：var help = require(’…/common/touch.js’)）
在这里插入图片描述
效果图
在这里插入图片描述
实现的思路： 其实就是将内容框跟删除按钮通过flex两边靠站在一行
手指触摸的时候同时将内容框和删除按钮向左移动删除按钮的宽度
通过获取的数据列表去判断此时滑动的是那条数据
（自己做个笔记，顺便帮助一下刚好需要的小伙伴，如有什么建议，欢迎留言哦）

微信小程序实现滑动删除效果
01-03
最初打算使用scroll-view实现，效果好、流畅、有惯性滑动，但由于滚动条没法去掉、无法实现上下层的帧布局，最终放弃了。 还是自己写个吧，利用手势事件。遗憾的是小程序中目前没有像Android中快速滑动事件，所以，要实现惯性滑动是不可能了。 item的布局： 推荐小程序优先使用flex布局，完全够用。这也是微信推荐的。 <view wx:for={{cardTeams}} wx:for-item=cardTeam id={{cardTeam.id}} class=item bindtouchstart=drawStart bindtouchmove=drawM
微信小程序 数据滑动删除效果、左滑出删除按钮效果
夜阑珊妖妖
01-09 1347
微信小程序 数据滑动删除效果、左滑出删除按钮效果 实现效果： 代码： html: <view class="container"> <view class="tuijianlp"> <view class="lpli {{isTouchMove == index ? 'touch-move-active' : ''}}" bindtap="lpinfo"...
微信小程序 — WeUI slideview 左滑删除（二）
棒怡情的专栏
08-20 1039
WeUi slideview左滑菜单。设置同一时间只能有一个列表显示左滑菜单。其它列表收齐。 bindshow
微信小程序之左滑删除，
csdn_zy_的博客
02-28 1720
先来讲一讲原理， 第一步，布好局，把垃圾桶隐藏用绝对定位和层级控制藏在下面，在上层需要左滑的那层，编写样式， margin-left:{{item.del ? ‘-212’:‘0’}}rpx;&quot;三目运算符，如果前者为true，则左滑212rpx；如果为false，则不动，如果需要过渡效果的小宝贝，可以添加一个时间时间，或者改成transform，列表的每一项的总盒子记得绑定id, 接下来是布局...
微信小程序实现左滑删除效果
JessicaLi的博客
09-02 1231
左滑删除这个效果在很多移动端APP上都有体现，很多用户也都养成了这样的习惯，但是在开放小程序过程中，我发现小程序本身并没有提供这个功能，所以只好自己动手，实现这个左滑删除的效果了。 实现效果 1.列表中侧滑删除 2.删除不同时存在 3.scrollview上下滑动与侧滑删除不影响 实现方式 运用了WXML中的事件事件->小程序API wxml代码 ...
微信小程序实现左滑删除
竹叶轻拂水
12-30 3857
目录代码思路：代码实现：jsHTMLcss 项目中的消息列表，和购物车列表需要左滑删除的需求还是挺多的，下面是消息左滑删除的思路和代码实现； 代码思路： 1、在获取到消息列表的时候，给每个消息一个是否显示删除按钮的默认值，全部为false 2、页面上消息列表每一项后面都有一个删除按钮，用transform和margin-left，flex结合使删除按钮隐藏在列表后面，动态绑定class，当需要显示删除按钮的时候，通过css的transform来显示删除按钮 3、给消息列表和删除按钮的父盒子绑定开始触摸和触摸
微信小程序-左滑删除效果
要输就输给追求吧！
08-31 8828
这几天一直在开发微信小程序，无奈得实现开发的各种要求，由于接触微信小程序时日不多，遂网上查阅各种资料，功夫不负有心人，找到了这一效果的源码，参考自 微信小程序联盟 原文链接1、wxml touch-item元素绑定了bindtouchstart、bindtouchmove事件<view class="container"> <view class="touch-item {{item.isTo
微信小程序之问题5:左滑显示删除按钮,点击删除当前项
张梦兰的博客
08-19 6567
我们开发中,总会遇到一些删除功能列表的操作,在小程序中,触屏左滑操作,即显示可操作删除按钮,下面就是我写的一个demo,供前端开发人员参考: 示例: WXML: <view class="container"> <view class="touch-item {{item.isTouchMove ? 'touch-move-active' : ''}}" data...
微信小程序独家秘笈之左滑删除
极客小寨的博客
06-25 2276
1. 概述 我们在学习微信小程序或者做项目时，应该会遇到左滑删除效果情况，那么这个时间预约功能我们应该怎么编写呢？ 今天我们说下微信小程序左滑删除效果的实现，现在市场上很多APP都在使用这个效果，一个listView页面，向左滑动一条item时，右侧会出现一个删除或者其他的选项，用户体验非常好，操作起来十分方便，今天我们就分享这样的小教程。希望对大家有所帮助。 不多说了，二当家要上...
微信小程序weui在线入门教程-WeUi基础组件-panel面板
杭州.黄老师
01-13 9469
效果图 wxml代码 &lt;view class="page"&gt; &lt;view class="page__hd"&gt; &lt;view class="page__title"&gt;Panel&lt;/view&gt; &lt;view class="page__desc"&gt;面板&lt
微信小程序weui在线入门教程-WeUi基础组件-footer页脚
杭州.黄老师
01-13 4969
效果图 wxml代码 &lt;view class="page"&gt; &lt;view class="page__hd"&gt; &lt;view class="page__title"&gt;Footer&lt;/view&gt; &lt;view class="page__desc"&gt;页脚&lt;
小程序左滑删除
webZRH的博客
09-30 757
&lt;view class="container"&gt; &lt;block wx:for="{{items}}" wx:key=""&gt; &lt;view class="table-cell-container"&gt; &lt;view class="table-content-container" style="left
vue移动端实现左滑编辑/删除
YY110621的博客
05-08 4131
根据项目需要使用Vue-touch 实现了一个vue移动端的左滑编辑和删除功能，废话不多说，先看效果图，然后上代码吧！ 第一步：安装vue-touch npm install vue-touch@next --save 第二步：main.js 中引入 import VueTouch from 'vue-touch'; Vue.use(VueTouch, { n...
微信小程序使用swiper实现侧滑功能
胡世林的博客
10-22 2002
使用swiper实现侧滑功能。微信小程序
微信小程序左滑动删除效果
chengxuyuan123_的博客
12-14 2434
最近做微信小程序项目遇到左滑动效果，比如在我的收藏页面，我的历史浏览记录页面，我的购物车页面，大多数都会用到这种效果，我把代码复制出来，供大家参考，用的时候直接用模板，再此基础上修改就行。 wxml中的代码： &lt;view class="touch-item {{item.isTouchMove ? 'touch-move-active' : ''}}" data-index=" {{i...
微信小程序左滑删除效果的实现
qq_40126542的博客
12-25 537
小编推荐：Fundebug专注于JavaScript、微信小程序、微信小游戏，Node.js和Java实时BUG监控。真的是一个很好用的bug监控费服务，众多大佬公司都在使用。 今天我们说下微信小程序左滑删除效果的实现，现在市场上很多APP都在使用这个效果，一个listView页面，向左滑动一条item时，右侧会出现一个删除或者其他的选项，用户体验非常好，操作起来十分方便，今天我们使用微信小...
微信小程序之触摸滑动事件案例+Slideview组件【手动左滑删除效果】
XH_jing的博客
11-19 4442
前言： 现在很多程序上都有左滑删除的效果，其实实现很简单，今天我们主要来记录一下小程序的左滑删除的实现过程。 效果图： 实现效果： 当我们在该条记录上进行左滑操作时，整条记录跟着向左移动，同时右侧的删除按钮会显示出来。 当我们点击删除按钮时，就会把该条记录删除掉。 如果不想删除该记录，可以右滑取消，或者随意点击一个位置都可以使右侧的删除按钮隐藏回到原样。 设计思路： 首先在页面上每条 item 记录分为上下两层，上面的 view 包裹正常展示的内容，下面的 view 存放左滑的显示的内容； 元素移
UITableView小技巧--实现cell向左滑动删除,编辑等功能
热门推荐
苏小妖的博客
02-24 1万+
一、简介 ios8.0之前只能定制左划的一个功能按键，若想要实现两个左划功能按键，却需要费一番功夫。自ios8.0之后，苹果推出新的api，来让开发者可以实现自定义左划控件。 二、初始化tableview 如同普通的tableview初始化一样就可以 三、实现tableview的delegate与datasource 实现你需要实现的datasource和delegate 四、实现自
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值