微信小程序?qū)崿F(xiàn)收貨地址左滑刪除

更新時(shí)間：2020年11月18日 11:20:36 作者：MarieDreamer

這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)收貨地址左滑刪除，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)收貨地址左滑刪除的具體代碼，供大家參考，具體內(nèi)容如下

效果：

思路：

一、用相對(duì)定位和絕對(duì)定位，列表放在上層，刪除按鈕放在下層（z-index不要為負(fù)）。

二、觸摸事件判斷用戶是否左滑，有 bindtouchstart，bindtouchmove，bindtouchend 三個(gè)觸摸事件。

1、bindtouchstart 記錄觸摸開始的點(diǎn)。開始點(diǎn)的坐標(biāo)在 e.touches[0] 中，這是相對(duì)于屏幕的，也就是以屏幕左上方為原點(diǎn)。

2、bindtouchmove 記錄觸摸移動(dòng)時(shí)的點(diǎn)。同上。

3、bindtouchmove 記錄觸摸結(jié)束的點(diǎn)。結(jié)束點(diǎn)的坐標(biāo)在 e.changedTouches[0] 中。

通過(guò)1、2方法，獲取到觸摸開始點(diǎn)、移動(dòng)距離，就可以讓列表層隨觸摸點(diǎn)左右移動(dòng)；

通過(guò)3方法，獲取最終點(diǎn)，判斷與開始點(diǎn)的距離，如果這個(gè)距離小于刪除按鈕的一半，則還原列表層

代碼：

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'>默認(rèn)</span>
 </view>
 <view>
 {{item.province}} {{item.address}}
 </view>
 </view>
 <!-- 編輯圖標(biāo) -->
 <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號(hào)",
 name: "啦啦啦",
 default:"1",
 phone: "12222223333",
 province: "河北省 石家莊市 長(zhǎng)安區(qū)",
 txtStyle: "",
 },
 {
 id: "2",
 address: "2幢2樓222號(hào)",
 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è)置觸摸起始點(diǎn)水平方向位置
 startX: e.touches[0].clientX
 });
 }
 },
 
 touchM: function (e) {
 if (e.touches.length == 1) {
 //手指移動(dòng)時(shí)水平方向位置
 var moveX = e.touches[0].clientX;
 //手指起始點(diǎn)位置與移動(dòng)期間的差值
 var disX = this.data.startX - moveX;
 var delBtnWidth = this.data.delBtnWidth;
 var txtStyle = "";
 if (disX == 0 || disX < 0) {//如果移動(dòng)距離小于等于0，文本層位置不變
 txtStyle = "left:0rpx";
 } else if (disX > 0) {//移動(dòng)距離大于0，文本層left值等于手指移動(dòng)距離
 txtStyle = "left:-" + disX + "rpx";
 if (disX >= delBtnWidth) {
 //控制手指移動(dòng)距離最大值為刪除按鈕的寬度
 txtStyle = "left:-" + delBtnWidth + "rpx";
 }
 }
 //獲取手指觸摸的是哪一項(xiàng)
 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) {
 //手指移動(dòng)結(jié)束后水平位置
 var endX = e.changedTouches[0].clientX;
 //觸摸開始與結(jié)束，手指移動(dòng)的距離
 var disX = this.data.startX - endX;
 var delBtnWidth = this.data.delBtnWidth;
 //如果距離小于刪除按鈕的1/2，不顯示刪除按鈕
 var txtStyle = disX > delBtnWidth / 2 ? "left:-" + delBtnWidth + "rpx" : "left:0rpx";
 //獲取手指觸摸的是哪一項(xiàng)
 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
 });
 }
 },
})

為大家推薦現(xiàn)在關(guān)注度比較高的微信小程序教程一篇：《微信小程序開發(fā)教程》小編為大家精心整理的，希望喜歡。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: