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


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里的条件判断
Feb 27 Javascript
js 发个判断字符串是否为符合标准的函数
Apr 27 Javascript
JavaScript学习笔记(二) js对象
Oct 25 Javascript
用jquery统计子菜单的条数示例代码
Oct 18 Javascript
基于JS实现数字+字母+中文的混合排序方法
Jun 06 Javascript
javascript类型系统——undefined和null全面了解
Jul 13 Javascript
AngularJS下对数组的对比分析
Aug 24 Javascript
微信小程序 图片等比例缩放(图片自适应屏幕)
Nov 16 Javascript
vue绑定class与行间样式style详解
Aug 16 Javascript
一个有意思的鼠标点击文字特效jquery代码
Sep 23 jQuery
JavaScript中常见内置函数用法示例
May 14 Javascript
JS实现带阴历的日历功能详解
Jan 24 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 pack与unpack 摸板字符字符含义
2009/10/29 PHP
JS与PHP向函数传递可变参数的区别实例代码
2011/05/18 PHP
php设计模式之正面模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
身份证号码前六位所代表的省,市,区, 以及地区编码下载
2007/04/12 Javascript
JavaScript DOM学习第八章 表单错误提示
2010/02/19 Javascript
JavaScript.The.Good.Parts阅读笔记(二)作用域&amp;闭包&amp;减缓全局空间污染
2010/11/16 Javascript
Javascript类定义语法,私有成员、受保护成员、静态成员等介绍
2011/12/08 Javascript
jqgrid 表格数据导出实例
2013/11/21 Javascript
css3元素简单的闪烁效果实现(html5 jquery)
2013/12/28 Javascript
Vue.js每天必学之过渡与动画
2016/09/06 Javascript
详解Javascript中的原型OOP
2016/10/12 Javascript
jQuery表格的维护和删除操作
2017/02/03 Javascript
详解vue事件对象、冒泡、阻止默认行为
2017/03/20 Javascript
vue 虚拟dom的patch源码分析
2018/03/01 Javascript
微信小程序使用map组件实现检索(定位位置)周边的POI功能示例
2019/01/23 Javascript
用 js 写一个 js 解释器过程详解
2019/08/02 Javascript
vue-cli3配置与跨域处理方法
2019/08/17 Javascript
如何利用vue实现波谱拟合详解
2020/11/05 Javascript
[52:09]2014 DOTA2华西杯精英邀请赛 5 25 NewBee VS DK第二场
2014/05/26 DOTA
基于DataFrame筛选数据与loc的用法详解
2018/05/18 Python
python实现列表中由数值查到索引的方法
2018/06/27 Python
解决使用PyCharm时无法启动控制台的问题
2019/01/19 Python
Pandas分组与排序的实现
2019/07/23 Python
Python使用itchat模块实现简单的微信控制电脑功能示例
2019/08/26 Python
Pytorch中的VGG实现修改最后一层FC
2020/01/15 Python
Python对wav文件的重采样实例
2020/02/25 Python
python中使用paramiko模块并实现远程连接服务器执行上传下载功能
2020/02/29 Python
Python使用Excel将数据写入多个sheet
2020/05/16 Python
Python+OpenCV图像处理——打印图片属性、设置存储路径、调用摄像头
2020/10/22 Python
Alpine安装Python3依赖出现的问题及解决方法
2020/12/25 Python
html5手机键盘弹出收起的处理
2020/01/20 HTML / CSS
经济实惠的豪华家具:My-Furniture
2019/03/12 全球购物
初级Java程序员面试题
2016/03/03 面试题
学前教育求职自荐信范文
2013/12/25 职场文书
大学生就业意向书
2015/05/11 职场文书
go语言中切片与内存复制 memcpy 的实现操作
2021/04/27 Golang