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


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 相关文章推荐
抽出www.templatemonster.com的鼠标悬停加载大图模板的代码
Jul 11 Javascript
jQuery ui1.7 dialog只能弹出一次问题
Aug 27 Javascript
javascript 数字格式化输出的实现代码
Dec 10 Javascript
简介AngularJS的视图功能应用
Jun 17 Javascript
学习javascript面向对象 理解javascript原型和原型链
Jan 04 Javascript
Ionic默认的Tabs模板使用实例
Aug 29 Javascript
Vue.js实现多条件筛选、搜索、排序及分页的表格功能
Nov 24 Javascript
微信小程序新增的拖动组件movable-view使用教程
May 20 Javascript
详解Vue2.0里过滤器容易踩到的坑
Jun 01 Javascript
react-native动态切换tab组件的方法
Jul 07 Javascript
Bootstrap Table中的多选框删除功能
Jul 15 Javascript
微信小程序实现的点击按钮 弹出底部上拉菜单功能示例
Dec 20 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实现基于栈的后缀表达式求值功能
2017/11/10 PHP
Laravel5.1 框架响应基本用法实例分析
2020/01/04 PHP
几个高效,简洁的字符处理函数
2007/04/12 Javascript
学习ExtJS table布局
2009/10/08 Javascript
始终在屏幕中间显示Div的代码(css+js)
2011/03/10 Javascript
分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]
2012/10/12 Javascript
jquery队列函数用法实例
2014/12/16 Javascript
js获取元素外链样式的方法
2015/01/27 Javascript
js控制输入框获得和失去焦点时状态显示的方法
2015/01/30 Javascript
JavaScript通过this变量快速找出用户选中radio按钮的方法
2015/03/23 Javascript
jquery实现初次打开有动画效果的网页TAB切换代码
2015/09/06 Javascript
javascript对象的相关操作小结
2016/05/16 Javascript
javascript设计模式之module(模块)模式
2016/08/19 Javascript
jQuery简单自定义图片轮播插件及用法示例
2016/11/21 Javascript
基于javascript实现数字英文验证码
2017/01/25 Javascript
基于JS实现移动端向左滑动出现删除按钮功能
2017/02/22 Javascript
详解基于Node.js的微信JS-SDK后端接口实现代码
2017/07/15 Javascript
Dropify.js图片宽高自适应的方法
2017/11/27 Javascript
React全家桶环境搭建过程详解
2018/05/18 Javascript
package.json中homepage属性的作用详解
2020/03/11 Javascript
详解elementUI中input框无法输入的问题
2020/04/27 Javascript
Python下实现的RSA加密/解密及签名/验证功能示例
2017/07/17 Python
用Python下载一个网页保存为本地的HTML文件实例
2018/05/21 Python
Python实现查找最小的k个数示例【两种解法】
2019/01/08 Python
python输出pdf文档的实例
2020/02/13 Python
python批量替换文件名中的共同字符实例
2020/03/05 Python
python实现俄罗斯方块小游戏
2020/04/24 Python
纯CSS3实现自定义Tooltip边框涂鸦风格的教程
2014/11/05 HTML / CSS
C#的几个面试问题
2016/05/22 面试题
关爱女孩行动实施方案
2014/03/13 职场文书
十佳家长事迹材料
2014/08/26 职场文书
校友会致辞
2015/07/30 职场文书
2015年党务工作者个人工作总结
2015/10/22 职场文书
确保减税降费落地生根,用实实在在措施
2019/07/19 职场文书
俄罗斯十大城市人口排名,第三首都仅排第六,第二是北方首都
2022/03/20 杂记
【DOTA2】总决赛血虐~ XTREME GAMING vs MAGMA - OGA DOTA PIT 2022 CN
2022/04/02 DOTA