微信小程序左滑删除效果的实现完整源码附效果图

效果图：

功能描述，小程序列表左滑删除功能的实现完整源代码实现：

<view wx:for='{{friends}}' wx:key="" wx:if='{{groupType==4}}' catchtap="nav_oneChat" id="{{item._id}}" class="item p_r" style="{{item.txtStyle}}" bindtouchstart="touchS" bindtouchmove="touchM" bindtouchend="touchE" data-index="{{index}}"><image class="head" src="{{item.identity=='a'?(item.b_head||'/image/default_head.png'):(item.a_head||'/image/default_head.png')}}"></image><view wx:if='{{item.hongdian}}' class="hongdian"></view><view class="loc" wx:if='{{!item.delShow}}'>{{item.newTime}}</view><view class="userName">{{item.identity=='a'?item.b_name:item.a_name}}</view><!-- 左滑删除 --><view bindtap="delItem" wx:if='{{item.delShow}}' class="posit"><view class="del" data-id="{{item._id}}" data-index="{{index}}" catchtap="del">删除</view></view></view>

JS代码：

//手指刚放到屏幕触发touchS:function(e){console.log("touchS"+e);//判断是否只有一个触摸点if(e.touches.length==1){this.setData({//记录触摸起始位置的X坐标startX:e.touches[0].clientX});}},//触摸时触发，手指在屏幕上每移动一次，触发一次touchM:function(e){console.log("touchM:"+e);var that = thisif(e.touches.length==1){//记录触摸点位置的X坐标var moveX = e.touches[0].clientX;//计算手指起始点的X坐标与当前触摸点的X坐标的差值var disX = that.data.startX - moveX;//delBtnWidth 为右侧按钮区域的宽度var delBtnWidth = that.data.delBtnWidth;var txtStyle = "";if(disX == 0 || disX < 0){//如果移动距离小于等于0，文本层位置不变txtStyle = "left:0px";}else if(disX > 0 ){//移动距离大于0，文本层left值等于手指移动距离txtStyle = "left:-"+disX+"px";if(disX>=delBtnWidth){//控制手指移动距离最大值为删除按钮的宽度txtStyle = "left:-"+delBtnWidth+"px";}}//获取手指触摸的是哪一个itemvar index = e.currentTarget.dataset.index;var list = that.data.friends;//将拼接好的样式设置到当前item中list[index].txtStyle = txtStyle; list.forEach(item=>item.delShow=false)list[index].delShow = true; //更新列表的状态this.setData({friends:list});}},touchE:function(e){console.log("touchE"+e);var that = thisif(e.changedTouches.length==1){//手指移动结束后触摸点位置的X坐标var endX = e.changedTouches[0].clientX;//触摸开始与结束，手指移动的距离var disX = that.data.startX - endX;var delBtnWidth = that.data.delBtnWidth;//如果距离小于删除按钮的1/2，不显示删除按钮var txtStyle = disX > delBtnWidth/2 ? "left:-"+delBtnWidth+"px":"left:0px";//获取手指触摸的是哪一项var index = e.currentTarget.dataset.index;var list = that.data.friends;list[index].txtStyle = txtStyle; //更新列表的状态that.setData({friends:list});}},

css （样式部分可用自己的，这里仅供参考）

/* pages/chatList/chatList.wxss */
page {background-color: #EDEDED;
}
.posit{padding: 50rpx 10rpx 50rpx;background-color: white;
}
.del{width: 200rpx;height: 60rpx;line-height: 60rpx;text-align: center;background-color: red;z-index: 2;color: white;
}.groupType{text-align: center;flex: 1;z-index: 999999;
}
.ring1{position: fixed;top: 30rpx;right: 30rpx;height: 40rpx;width: 40rpx;z-index:99999;background-color: white;padding:10rpx;border-radius: 50%;border: 1px solid #d0d0d0;
}
.ring2{position: fixed;top: 130rpx;right: 30rpx;height: 40rpx;width: 40rpx;z-index:99999;background-color: white;padding:10rpx;border-radius: 50%;border: 1px solid #d0d0d0;
}
.on{color: cadetblue;
}
.hongdian{width: 20rpx;height: 20rpx;border-radius: 50%;background-color: red;position: absolute;left: 96rpx;top: 14rpx;
}
.addIcon{width: 80rpx;height: 80rpx;position: fixed;right: 50rpx;bottom: 300rpx;border-radius: 50%;
}
.p_r{display: flex;flex-direction: row;
}
.tab{position: fixed;bottom: 0;border-top: 1px solid #d0d0d0;height: 90rpx;line-height: 90rpx;z-index: 999999;background-color: white;width: 100%;
}
.top{position: fixed;top: 0;z-index: 2;width: 100%;background-color: #EDEDED;
}
.pageTitle {padding-top: 60rpx;padding-left: 20rpx;height: 140rpx;background-color: #EDEDED;
}.searchcion {margin: 16rpx 10rpx 10rpx 10rpx;position: absolute;right: 15rpx;z-index: 2;width: 20px;height: 20px;text-align: center;
}.search_arr {border: 1px solid #d0d0d0;background-color: #EDEDED;border-radius: 50rpx;margin-left: 30rpx;position: fixed;width: 40%;top: 54rpx;left: 200rpx;
}.search_arr input {margin-left: 20rpx;height: 60rpx;border-radius: 5px;
}
swiper{position: fixed;width: 100%;
}
.swiper-item{width: 100%;height: 300rpx;
}
.item{position: relative;margin-bottom: 20rpx;
}
.head{width: 90rpx;height: 90rpx;min-width: 90rpx;border-radius: 10rpx;margin: 16rpx;
}
.user_list{position: relative;padding: 20rpx 0 20rpx;background-color: white;margin-bottom: 100rpx;
}
.userName{margin-left: 20rpx;border-bottom: 1rpx solid #d0d0d0;width: 82%;font-weight: normal;font-size: 32rpx;margin-top: 32rpx;padding-bottom: 10rpx;
}
.loc{
position: absolute;
right: 40rpx;
top: 40rpx;
}

微信小程序左滑删除效果的实现完整源码附效果图相关推荐

【愚公系列】2022年08月微信小程序-左划删除效果实现
文章目录前言一.左划删除效果实现 1.自定义实现 2.第三方组件实现 2.1 第三方包安装 2.2 使用 3.1 weui方式使用 3.1 weui安装 3.2 使用前言左划删除效果实现主要用 ...
[微信小程序]实现一个自定义遮罩层组件(完整示例代码附效果图)
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: 先上效果图: 点击按钮Show显示遮罩层,再次点击屏幕任何地方隐藏遮罩层; <button bi ...
微信小程序左滑删除(Slideview)
WEUI: https://wechat-miniprogram.github.io/weui/docs/slideview.html 小程序tree左滑编辑: json {"compone ...
微信小程序左滑删除功能(多按钮)
一.效果图二.备注 1.图标为封装阿里云图标组件二.代码 1.wxml <view><block wx:if="{{list.length > 0}}" ...
模拟投票小程序C语言代码,微信小程序投票系统创建投票发布demo完整源码下载一个很简单 - 下载 - 搜珍网...
压缩包 : cc5b0189c052ed2f04381e14637b362c.zip 列表 wx_voteforyou-master/ wx_voteforyou-master/README.md w ...
顺畅操作：教你微信小程序左滑实现更多功能
前言当你在使用微信小程序时,是否曾经遇到过左滑操作是如此的顺畅,让你想起了 iPhone 上的滑动操作?左滑操作在微信小程序中已经成为了一个常见的交互方式,它能够帮助用户快速地执行某些操作,提高了用 ...
微信小程序界面从右边滑出_微信小程序--左滑右滑的乐趣
左滑右滑你不再是一个人无论你是一个程序猿还是一个程序媛,每天干的事除了coding还是coding,代码不能解决的问题(什么问题自己心里还没点abcd数嘛),探探能帮你解决.最近网上特流行一款交 ...
node.js云学堂微信小程序学习系统的设计与实现毕业设计源码011735
Node.js云学堂微信小程序摘要信息化社会内需要与之针对性的信息获取途径,但是途径的扩展基本上为人们所努力的方向,由于站在的角度存在偏差,人们经常能够获得不同类型信息,这也是技术最为难以攻克的课 ...
mysql基于微信小程序的化妆品商城系统设计与实现毕业设计源码041152
基于springboot微信小程序的化妆品商城系统摘要随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户 ...

微信小程序左滑删除效果的实现完整源码附效果图

微信小程序左滑删除效果的实现完整源码附效果图相关推荐

最新文章

热门文章