這篇文章主要為大家展示了微信小程序如何實現(xiàn)收貨地址左滑刪除，內(nèi)容簡而易懂，希望大家可以學(xué)習(xí)一下，學(xué)習(xí)完之后肯定會有收獲的，下面讓小編帶大家一起來看看吧。
創(chuàng)新互聯(lián)專注于隆堯企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站建設(shè),商城網(wǎng)站制作。隆堯網(wǎng)站建設(shè)公司,為隆堯等地區(qū)提供建站服務(wù)。全流程按需規(guī)劃網(wǎng)站，專業(yè)設(shè)計，全程項目跟蹤，創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)
效果：
思路：
一、用相對定位和絕對定位，列表放在上層，刪除按鈕放在下層（z-index不要為負(fù)）。
二、觸摸事件判斷用戶是否左滑，有 bindtouchstart，bindtouchmove，bindtouchend 三個觸摸事件。
1、bindtouchstart 記錄觸摸開始的點。開始點的坐標(biāo)在 e.touches[0] 中，這是相對于屏幕的，也就是以屏幕左上方為原點。
2、bindtouchmove 記錄觸摸移動時的點。同上。
3、bindtouchmove 記錄觸摸結(jié)束的點。結(jié)束點的坐標(biāo)在 e.changedTouches[0] 中。
通過1、2方法，獲取到觸摸開始點、移動距離，就可以讓列表層隨觸摸點左右移動；
通過3方法，獲取最終點，判斷與開始點的距離，如果這個距離小于刪除按鈕的一半，則還原列表層
代碼：
1、wxml
{{item.name}} {{item.phone}} 默認(rèn) {{item.province}} {{item.address}} 刪除 添加地址
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: "河北省 石家莊市 長安區(qū)",
txtStyle: "",
},
{
id: "2",
address: "2幢2樓222號",
name: "嚯嚯嚯",
default: "0",
phone: "12345678900",
province: "浙江省 杭州市 市轄區(qū)",
txtStyle: "",
},
{
id: "3",
address: "1幢1單元",
name: "哈哈哈",
default: "0",
phone: "18208350499",
province: "河北省 石家莊市 新華區(qū)",
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({
//設(shè)置觸摸起始點水平方向位置
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;
//更新列表的狀態(tài)
this.setData({
address: list
});
}
},
touchE: function (e) {
if (e.changedTouches.length == 1) {
//手指移動結(jié)束后水平位置
var endX = e.changedTouches[0].clientX;
//觸摸開始與結(jié)束，手指移動的距離
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;
//更新列表的狀態(tài)
this.setData({
address: list,
del_index: del_index
});
}
},
})以上就是關(guān)于微信小程序如何實現(xiàn)收貨地址左滑刪除的內(nèi)容，如果你們有學(xué)習(xí)到知識或者技能，可以把它分享出去讓更多的人看到。
