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


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 相关文章推荐
JQuery 学习笔记 选择器之二
Jul 23 Javascript
使用js判断数组中是否包含某一元素(类似于php中的in_array())
Dec 12 Javascript
详解JavaScript UTC时间转换方法
Jan 07 Javascript
JavaScript过滤字符串中的中文与空格方法汇总
Mar 07 Javascript
jquery.Jcrop结合JAVA后台实现图片裁剪上传实例
Nov 05 Javascript
form+iframe解决跨域上传文件的方法
Nov 18 Javascript
微信小程序 在线支付功能的实现
Mar 14 Javascript
JS排序之快速排序详解
Apr 08 Javascript
详解webpack 如何集成第三方js库
Jun 29 Javascript
关于Vue中axios的封装实例详解
Oct 20 Javascript
微信小程序 WeUI扩展组件库的入门教程
Apr 21 Javascript
vue 自定义的组件绑定点击事件
Apr 21 Vue.js
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简单系统查询模块代码打包下载
2008/06/07 PHP
PHPWind与Discuz截取字符函数substrs与cutstr性能比较
2011/12/05 PHP
PHP实现删除非站内外部链接实例代码
2014/06/17 PHP
开启PHP的伪静态模式
2015/12/31 PHP
php实现学生管理系统
2020/03/21 PHP
php 实现一个字符串加密解密的函数实例代码
2016/11/01 PHP
PHP网站自动化配置的实现方法(必看)
2017/05/27 PHP
js getBoundingClientRect() 来获取页面元素的位置
2010/11/25 Javascript
关于URL中的特殊符号使用介绍
2011/11/03 Javascript
Jquery动态进行图片缩略的原理及实现
2013/08/13 Javascript
教你如何使用PHP输出中文JSON字符串
2014/05/22 Javascript
Jquery异步提交表单代码分享
2015/03/26 Javascript
JS日期格式化之javascript Date format
2015/10/01 Javascript
javascript函数中的3个高级技巧
2016/09/22 Javascript
微信小程序 页面跳转及数据传递详解
2017/03/14 Javascript
原生js实现仿window10系统日历效果的实例
2017/10/31 Javascript
小程序数据通信方法大全(推荐)
2019/04/15 Javascript
Node.js学习之内置模块fs用法示例
2020/01/22 Javascript
Vue.js暴露方法给WebView的使用操作
2020/09/07 Javascript
Antd的Table组件嵌套Table以及选择框联动操作
2020/10/24 Javascript
Python使用chardet判断字符编码
2015/05/09 Python
Python决策树之基于信息增益的特征选择示例
2018/06/25 Python
Python字符串和正则表达式中的反斜杠('\')问题详解
2019/09/03 Python
python实现用户名密码校验
2020/03/18 Python
Python configparser模块操作代码实例
2020/06/08 Python
CSS3中几个新增加的盒模型属性使用教程
2016/03/01 HTML / CSS
详解如何使用rem或viewport进行移动端适配
2020/08/14 HTML / CSS
关爱女孩行动实施方案
2014/03/13 职场文书
物理课外活动总结
2014/08/27 职场文书
2014大学生党员评议个人总结
2014/09/22 职场文书
2015年消费者权益日活动总结
2015/02/09 职场文书
居住证明范文
2015/06/17 职场文书
2019职场单身人才调研报告:互联网行业单身比例最高
2019/08/07 职场文书
Python中Permission denied的解决方案
2021/04/02 Python
Python中可变和不可变对象的深入讲解
2021/08/02 Python
Windows7下FTP搭建图文教程
2022/08/05 Servers