微信小程序左滑删除

最新推荐文章于 2022-08-20 16:50:32 发布
最新推荐文章于 2022-08-20 16:50:32 发布
阅读量214 收藏
点赞数
分类专栏： 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lannieZ/article/details/100705651
版权

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

lannieZ
关注
专栏目录
vue移动端实现左滑编辑/删除
YY110621的博客
05-08 4011
根据项目需要使用Vue-touch 实现了一个vue移动端的左滑编辑和删除功能，废话不多说，先看效果图，然后上代码吧！ 第一步：安装vue-touch npm install vue-touch@next --save 第二步：main.js 中引入 import VueTouch from 'vue-touch'; Vue.use(VueTouch, { n...
微信小程序实现左滑删除
竹叶轻拂水
12-30 3588
目录代码思路：代码实现：jsHTMLcss 项目中的消息列表，和购物车列表需要左滑删除的需求还是挺多的，下面是消息左滑删除的思路和代码实现； 代码思路： 1、在获取到消息列表的时候，给每个消息一个是否显示删除按钮的默认值，全部为false 2、页面上消息列表每一项后面都有一个删除按钮，用transform和margin-left，flex结合使删除按钮隐藏在列表后面，动态绑定class，当需要显示删除按钮的时候，通过css的transform来显示删除按钮 3、给消息列表和删除按钮的父盒子绑定开始触摸和触摸
微信小程序实现滑动删除效果
01-03
最初打算使用scroll-view实现，效果好、流畅、有惯性滑动，但由于滚动条没法去掉、无法实现上下层的帧布局，最终放弃了。 还是自己写个吧，利用手势事件。遗憾的是小程序中目前没有像Android中快速滑动事件，所以，要实现惯性滑动是不可能了。 item的布局： 推荐小程序优先使用flex布局，完全够用。这也是微信推荐的。 <view wx:for={{cardTeams}} wx:for-item=cardTeam id={{cardTeam.id}} class=item bindtouchstart=drawStart bindtouchmove=drawM
微信小程序使用swiper实现侧滑功能
胡世林的博客
10-22 1910
使用swiper实现侧滑功能。微信小程序
微信小程序 列表中，item左滑删除功能
weixin_38847104的博客
11-07 6107
第一步：把想要的两种样式写出来 1.正常显示的样式 css: .box{ height: 100%; } .item{ position:relative; top: 0; width: 100%; height: 150rpx; border-bottom: #d9d9d9 solid 1rpx; padding: 0; } .item .content{ ba...
微信小程序实现左滑删除效果
Dilemma_me的博客
10-15 1686
微信小程序实现左滑删除效果 .wxml <scroll-view scroll-y="{{isScroll}}" style='width:{{windowWidth}}px;height:{{windowHeight}}px'> <block wx:key="item" wx:for="{{data}}"> <view data-index='{{...
微信小程序左滑删除效果的实现
03-29
今天我们说下微信小程序左滑删除效果的实现，现在市场上很多APP都在使用这个效果，一个listView页面，向左滑动一条item时，右侧会出现一个删除或者其他的选项，用户体验非常好，操作起 ...       今天我们说下...
微信小程序左滑删除实现代码实例
10-16
微信小程序中实现左滑删除功能，主要涉及前端页面的布局设计与交互逻辑的编写。通过示例代码的详细展示，可以学习如何在微信小程序中添加左滑滑动事件，以及如何实现左滑后显示删除按钮的功能。接下来将详细介绍相关...
微信小程序 — WeUI slideview 左滑删除（二）
棒怡情的专栏
08-20 842
WeUi slideview左滑菜单。设置同一时间只能有一个列表显示左滑菜单。其它列表收齐。 bindshow
微信小程序 数据滑动删除效果、左滑出删除按钮效果
夜阑珊妖妖
01-09 1274
微信小程序 数据滑动删除效果、左滑出删除按钮效果 实现效果： 代码： html: <view class="container"> <view class="tuijianlp"> <view class="lpli {{isTouchMove == index ? 'touch-move-active' : ''}}" bindtap="lpinfo"...
微信小程序weui在线入门教程-WeUi基础组件-footer页脚
杭州.黄老师
01-13 4582
效果图 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;
微信小程序之触摸滑动事件案例+Slideview组件【手动左滑删除效果】
XH_jing的博客
11-19 4119
前言： 现在很多程序上都有左滑删除的效果，其实实现很简单，今天我们主要来记录一下小程序的左滑删除的实现过程。 效果图： 实现效果： 当我们在该条记录上进行左滑操作时，整条记录跟着向左移动，同时右侧的删除按钮会显示出来。 当我们点击删除按钮时，就会把该条记录删除掉。 如果不想删除该记录，可以右滑取消，或者随意点击一个位置都可以使右侧的删除按钮隐藏回到原样。 设计思路： 首先在页面上每条 item 记录分为上下两层，上面的 view 包裹正常展示的内容，下面的 view 存放左滑的显示的内容； 元素移
微信小程序 触摸滑动事件 触摸view区域 左滑右滑
thunder_fxl的博客
11-18 1241
#微信小程序 触摸滑动事件 /** * ===================== 滑动事件 */ // 触摸开始事件 touchStart: function (e) { touchDot = e.touches[0].pageX; // 获取触摸时的原点 // 使用js计时器记录时间 interval = setInterval(function () { time++; }, 100); }, // 触摸移动事件 t
微信小程序左滑删除效果的实现代码
08-31
在微信小程序中实现左滑删除效果，是一种常见的交互设计，让用户能够轻松地对列表中的项进行删除或执行其他操作。本文将详细介绍如何在微信小程序中实现这一功能。 首先，我们需要理解整个实现过程的关键点。左滑...
小程序WeUI使用教程（简单易懂）
热门推荐
WebView
09-10 2万+
1、WeUI WeUI 是一套同微信原生视觉体验一致的基础样式库。由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。它最初是为了给在微信端页面提供一致的视觉体验而开发开源的一个样式库，后续随着小程序、企业微信等等的开放能力出现，WeUI也提供了小程序、企业微信等等的版本。我们将要介绍的，就是WeUI的小程序版本。 2、使用步骤 首先去WeUI WeUI将包下载到本地，...
微信小程序weui在线入门教程-WeUi操作反馈-actionsheet弹出式菜单
杭州.黄老师
01-13 3857
效果图 wxml代码 &lt;view class="page"&gt; &lt;view class="page__hd"&gt; &lt;view class="page__title"&gt;ActionSheet&lt;/view&gt; &lt;view class="page__desc"&gt;弹出式菜
微信小程序weui在线入门教程-WeUi基础组件-panel面板
杭州.黄老师
01-13 9013
效果图 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
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值