介绍 & lt;查看天气:为=皗{地址}},风格=& # 39;位置:相对;& # 39;比;
& lt; !——列表层——比;
& lt;视图类=& # 39;列表# 39;=& # 39;风格{{item.txtStyle}} & # 39;bindtouchstart=皌ouchS"bindtouchmove=皌ouchM"bindtouchend=皌ouchE"材料指数=& # 39;{{指数}}& # 39;比;
& lt; !——收货信息——比;
& lt;视图类=& # 39;信息# 39;bindtap=& # 39; select_addr& # 39;数据id=皗{item.id}}“比;
& lt; view>
{{item.name}}
& lt;跨类=皃hone"在{{item.phone}} & lt;/span>
& lt;跨度wx:如果=皗{item.default==1}},类=& # 39;def # 39;在默认& lt;/span>
& lt;/view>
& lt; view>
{{项目。省}}{{item.address}}
& lt;/view>
& lt;/view>
& lt; !——编辑图标——比;
& lt;视图类=& # 39;编辑# 39;bindtap=& # 39;编辑# 39;数据id=& # 39; {{item.id}} & # 39;比;
& lt;图像src=https://www.yisu.com/zixun//图像/edit.png的>
<视图类="删除"数据id="{{项目。id}}“材料指数={{指数}}的bindtap=" delItem ">删除
<视图类='添加' bindtap='添加'>添加地址 页面{
background - color: # F0EFF5;
}
.list {
位置:相对;
z - index: 2;
溢出:隐藏;
背景颜色:白色;
rpx margin-top: 2;
填充:25 rpx;
显示:flex;
对齐项目:中心;
justify-content:之间的空间;
最小高度:150 rpx;
}
delete {
位置:绝对的;
上图:0 rpx;
background - color: # e64340;
宽度:180 rpx;
text-align:中心;
z - index: 1;
右:0;
颜色:# fff;
高度:100%;
显示:flex;
对齐项目:中心;
justify-content:中心;
}
info {
显示:flex;
flex-direction:列;
对齐项目:flex-start;
}
info观点:第一个孩子{
text-align:中心;
字体大小:35 rpx;
margin-bottom: 10 rpx;
}
info观点:nth-child (2) {
字体大小:30 rpx;
margin-bottom: 10 rpx;
}
. def {
字体大小:30 rpx;
边界:1 rpx固体红;
border - radius: 5 rpx;
填充:0 10 rpx;
颜色:红色;
margin-right: 10 rpx;
}
.phone {
颜色:灰色,字体大小:30 rpx;保证金:0 20 rpx;
}
.edit {
填充:40 rpx;
}
{.edit形象
宽度:40 rpx;
高度:40 rpx;
margin-left: 10 rpx;
}
阀门{
宽度:650 rpx;
边界:2 rpx固体灰色;
身高:100 rpx;
行高:100 rpx;
text-align:中心;
字体大小:30 rpx;
border - radius: 10 rpx;
位置:固定;
底部:50 rpx;
左:50 rpx;
背景颜色:白色;
} 页面({
数据:{
地址:[
{
id:“1”,
地址:“1单元222号“,
名称:“啦啦啦,,
默认值:“1”,
电话:“12222223333”,
省:“河北省石家庄市长安区“,
txtStyle:““,
}，
{
id:“2“,
地址:“2幢2楼222号“,
名称:“嚯嚯嚯,,
默认值:“0”,
电话:“12345678900”,
省:“浙江省杭州市市辖区“,
txtStyle:““,
}，
{
id:“3“,
地址:“1幢1单元,,
名称:“哈哈哈,,
默认值:“0”,
电话:“18208350499”,
省:“河北省石家庄市新华区“,
txtStyle:““,
}
),
delBtnWidth: 180
}，>以上就是关于微信小程序如何实现收货地址左滑删除的内容,如果你们有学习到知识或者技能,可以把它分享出去让更多的人看的到。
这篇文章主要为大家展示了微信小程序如何实现收货地址左滑删除,内容简而易懂,希望大家可以学习一下,学习完之后肯定会有收获的,下面让小编带大家一起来看看吧。
<>强效果:
<强>思路:
一、用相对定位和绝对定位,列表放在上层,删除按钮放在下层(z - index不要为负)。
二、触摸事件判断用户是否左滑,有bindtouchstart, bindtouchmove, bindtouchend三个触摸事件。
1, bindtouchstart记录触摸开始的点。开始点的坐标在e。触摸[0]中,这是相对于屏幕的,也就是以屏幕左上方为原点。
2, bindtouchmove 记录触摸移动时的点。同上。
3, bindtouchmove 记录触摸结束的点。结束点的坐标在e。changedTouches[0]中。
通过1、2方法,获取到触摸开始点,移动距离,就可以让列表层随触摸点左右移动;
通过3方法,获取最终点,判断与开始点的距离,如果这个距离小于删除按钮的一半,则还原列表层
<强>代码:
1, wxml
2, wxs
3, JS
