微信小程序实现收货地址左滑删除


Posted in Javascript onNovember 18, 2020

本文实例为大家分享了微信小程序实现收货地址左滑删除的具体代码,供大家参考,具体内容如下

效果:

微信小程序实现收货地址左滑删除

思路:

一、用相对定位和绝对定位,列表放在上层,删除按钮放在下层(z-index不要为负)。

二、触摸事件判断用户是否左滑,有 bindtouchstart,bindtouchmove,bindtouchend 三个触摸事件。

1、bindtouchstart 记录触摸开始的点。开始点的坐标在 e.touches[0] 中,这是相对于屏幕的,也就是以屏幕左上方为原点。

2、bindtouchmove 记录触摸移动时的点。同上。

3、bindtouchmove 记录触摸结束的点。结束点的坐标在 e.changedTouches[0] 中。

通过1、2方法,获取到触摸开始点、移动距离,就可以让列表层随触摸点左右移动;

通过3方法,获取最终点,判断与开始点的距离,如果这个距离小于删除按钮的一半,则还原列表层

代码:

1、wxml

<view wx:for="{{address}}" style='position: relative;'>
 <!-- 列表层 -->
 <view class='list' style='{{item.txtStyle}}' bindtouchstart="touchS" bindtouchmove="touchM" bindtouchend="touchE" data-index='{{index}}'>
 <!-- 收货信息 -->
 <view class='info' bindtap='select_addr' data-id="{{item.id}}">
 <view>
 {{item.name}} 
 <span class="phone">{{item.phone}}</span>
 <span wx:if="{{item.default == 1}}" class='def'>默认</span>
 </view>
 <view>
 {{item.province}} {{item.address}}
 </view>
 </view>
 <!-- 编辑图标 -->
 <view class='edit' bindtap='edit' data-id='{{item.id}}' >
 <image src='/image/edit.png'></image>
 </view>
 </view>
 <!-- 删除按钮 -->
 <view class="delete" data-id="{{item.id}}" data-index='{{index}}' bindtap="delItem" >删除</view>
</view>
 
<view class='add' bindtap='add'>添加地址</view>

2、wxss

page{
 background-color: #F0EFF5;
}
.list{
 position: relative;
 z-index: 2;
 overflow: hidden;
 background-color: white;
 margin-top: 2rpx;
 padding: 25rpx;
 display: flex;
 align-items: center;
 justify-content:space-between;
 min-height: 150rpx;
}
.delete{
 position: absolute;
 top:0rpx;
 background-color: #e64340;
 width: 180rpx;
 text-align: center;
 z-index: 1;
 right: 0;
 color: #fff;
 height: 100%;
 display: flex;
 align-items: center;
 justify-content: center;
}
.info{
 display: flex;
 flex-direction: column;
 align-items: flex-start;
}
.info view:first-child{
 text-align: center;
 font-size: 35rpx;
 margin-bottom: 10rpx;
}
.info view:nth-child(2){
 font-size: 30rpx;
 margin-bottom: 10rpx;
}
.def{
 font-size: 30rpx;
 border:1rpx solid red;
 border-radius: 5rpx;
 padding:0 10rpx;
 color: red;
 margin-right: 10rpx;
}
.phone{
 color:gray;font-size:30rpx;margin: 0 20rpx;
}
.edit{
 padding:40rpx;
}
.edit image{
 width: 40rpx;
 height: 40rpx;
 margin-left:10rpx;
}
.add{
 width: 650rpx;
 border: 2rpx solid gray;
 height: 100rpx;
 line-height: 100rpx;
 text-align: center;
 font-size: 30rpx;
 border-radius: 10rpx;
 position: fixed;
 bottom: 50rpx;
 left: 50rpx;
 background-color: white;
}

3、JS

Page({
 data: {
 address:[
 {
 id: "1",
 address: "1单元222号",
 name: "啦啦啦",
 default:"1",
 phone: "12222223333",
 province: "河北省 石家庄市 长安区",
 txtStyle: "",
 },
 {
 id: "2",
 address: "2幢2楼222号",
 name: "嚯嚯嚯",
 default: "0",
 phone: "12345678900",
 province: "浙江省 杭州市 市辖区",
 txtStyle: "",
 },
 {
 id: "3",
 address: "1幢1单元",
 name: "哈哈哈",
 default: "0",
 phone: "18208350499",
 province: "河北省 石家庄市 新华区",
 txtStyle: "",
 }
 ],
 delBtnWidth: 180
 },
 
 onLoad: function (options) {
 //获取收货地址 省略
 },
 
 edit: function (e) {
 //编辑收货地址 省略
 },
 
 add: function () {
 //增加收货地址 省略
 },
 
 delItem: function (e) {
 var id = e.currentTarget.dataset.id;
 var index = e.currentTarget.dataset.index;
 this.data.address.splice(index, 1);
 this.setData({
 address: this.data.address
 })
 },
 
 touchS: function (e) {
 if (e.touches.length == 1) {
 this.setData({
 //设置触摸起始点水平方向位置
 startX: e.touches[0].clientX
 });
 }
 },
 
 touchM: function (e) {
 if (e.touches.length == 1) {
 //手指移动时水平方向位置
 var moveX = e.touches[0].clientX;
 //手指起始点位置与移动期间的差值
 var disX = this.data.startX - moveX;
 var delBtnWidth = this.data.delBtnWidth;
 var txtStyle = "";
 if (disX == 0 || disX < 0) {//如果移动距离小于等于0,文本层位置不变
 txtStyle = "left:0rpx";
 } else if (disX > 0) {//移动距离大于0,文本层left值等于手指移动距离
 txtStyle = "left:-" + disX + "rpx";
 if (disX >= delBtnWidth) {
 //控制手指移动距离最大值为删除按钮的宽度
 txtStyle = "left:-" + delBtnWidth + "rpx";
 }
 }
 //获取手指触摸的是哪一项
 var index = e.currentTarget.dataset.index;
 var list = this.data.address;
 list[index]['txtStyle'] = txtStyle;
 //更新列表的状态
 this.setData({
 address: list
 });
 }
 },
 touchE: function (e) {
 if (e.changedTouches.length == 1) {
 //手指移动结束后水平位置
 var endX = e.changedTouches[0].clientX;
 //触摸开始与结束,手指移动的距离
 var disX = this.data.startX - endX;
 var delBtnWidth = this.data.delBtnWidth;
 //如果距离小于删除按钮的1/2,不显示删除按钮
 var txtStyle = disX > delBtnWidth / 2 ? "left:-" + delBtnWidth + "rpx" : "left:0rpx";
 //获取手指触摸的是哪一项
 var index = e.currentTarget.dataset.index;
 var list = this.data.address;
 var del_index = '';
 disX > delBtnWidth / 2 ? del_index = index : del_index = '';
 list[index].txtStyle = txtStyle;
 //更新列表的状态
 this.setData({
 address: list,
 del_index: del_index
 });
 }
 },
})

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript实现GriwView单列全选(自写代码)
May 13 Javascript
js 实现 input type=&quot;file&quot; 文件上传示例代码
Aug 07 Javascript
js数组循环遍历数组内所有元素的方法
Jan 18 Javascript
js 针对html DOM元素操作等经验累积
Mar 11 Javascript
jquery实现点击向下展开菜单项(伸缩导航)效果
Aug 22 Javascript
JS复制对应id的内容到粘贴板(Ctrl+C效果)
Jan 23 Javascript
使用store来优化React组件的方法
Oct 23 Javascript
父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法
Apr 25 Javascript
webpack3里使用uglifyjs压缩js时打包报错的解决
Dec 13 Javascript
浅谈VueJS SSR 后端绘制内存泄漏的相关解决经验
Dec 20 Javascript
js实现的格式化数字和金额功能简单示例
Jul 30 Javascript
AngularJS实现多级下拉框
Mar 25 Javascript
jquery-ui 进度条功能示例【测试可用】
Jul 25 #jQuery
微信小程序实现左滑动删除效果
Mar 30 #Javascript
jquery ui 实现 tab标签功能示例【测试可用】
Jul 25 #jQuery
小程序实现左滑删除效果
Jul 25 #Javascript
微信公众号获取用户地理位置并列出附近的门店的示例代码
Jul 25 #Javascript
详解Vue.js和layui日期控件冲突问题解决办法
Jul 25 #Javascript
turn.js异步加载实现翻书效果
Jul 25 #Javascript
You might like
php简单实现无限分类树形列表的方法
2015/03/27 PHP
Google Map V3 绑定气泡窗口(infowindow)Dom事件实现代码
2013/04/26 Javascript
JavaScript 实现类的多种方法实例
2013/05/01 Javascript
JavaScript日期时间格式化函数分享
2014/05/05 Javascript
Javascript实现Web颜色值转换
2015/02/05 Javascript
javascript连续赋值问题
2015/07/08 Javascript
js实现文字在按钮上滚动的方法
2015/08/20 Javascript
JS实现三个层重叠点击互相切换的方法
2015/10/06 Javascript
jquery淡入淡出效果简单实例
2016/01/14 Javascript
js自定义select下拉框美化特效
2016/05/12 Javascript
JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍
2016/05/19 Javascript
javaScript事件学习小结(四)event的公共成员(属性和方法)
2016/06/09 Javascript
浅析JavaScript中命名空间namespace模式
2016/06/22 Javascript
JavaScript中有关一个数组中最大值和最小值及它们的下表的输出的解决办法
2016/07/01 Javascript
es6的数字处理的方法(5个)
2017/03/16 Javascript
详解Angularjs 自定义指令中的数据绑定
2018/07/19 Javascript
微信小程序导入Vant报错VM292:1 thirdScriptError的解决方法
2019/08/01 Javascript
javascript跳转与返回和刷新页面的实例代码
2019/11/20 Javascript
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
2020/04/24 Javascript
解决vue项目router切换太慢问题
2020/07/19 Javascript
基于vue hash模式微信分享#号的解决
2020/09/07 Javascript
利用H5api实现时钟的绘制(javascript)
2020/09/13 Javascript
Python的时间模块datetime详解
2017/04/17 Python
Python列表list操作符实例分析【标准类型操作符、切片、连接字符、列表解析、重复操作等】
2017/07/24 Python
对Python的zip函数妙用,旋转矩阵详解
2018/12/13 Python
Python整数对象实现原理详解
2019/07/01 Python
Python 正则表达式 re.match/re.search/re.sub的使用解析
2019/07/22 Python
python实现的分析并统计nginx日志数据功能示例
2019/12/21 Python
Django-xadmin后台导入json数据及后台显示信息图标和主题更改方式
2020/03/11 Python
Django模板获取field的verbose_name实例
2020/05/19 Python
解决html5中的video标签ios系统中无法播放使用的问题
2020/08/10 HTML / CSS
Ashford台湾:以折扣价提供奢华的男女用表款
2019/12/04 全球购物
教师自我鉴定
2013/12/13 职场文书
小学六年级学生评语
2014/04/22 职场文书
2017新年晚会开幕词
2016/03/03 职场文书
写自招自荐信的绝招!
2019/04/19 职场文书