小程序最简单的滑动删除代码
网上看过不少关于微信小程序滑动删除的例子，感觉有点复杂。于是写了个简单点的例子，希望对大家有所帮助。
片段代码下载：https://developers.weixin.qq.com/s/sNy7ZfmI7mvj
问题关键点：
1、wxml的list中，添加： bindtouchmove=“btn_touch” data-addr_id="{{item.addr_id}}"
然后，根据addr\_id的值，
<view class=“footer” wx:if="{{del_id!=item.addr_id}}">
......
<view class="footer\_long" wx:else>
2、在js中，（1）初始化设置：
data: {
del\_id: 0,
},
（2）函数：
btn\_touch:function(e){
var addr\_id = e.currentTarget.dataset.addr\_id;
this.setData({
del\_id: addr\_id,
});
},
//取消删除
btn\_cancel:function(e){
this.setData({
del\_id: 0,
})
},
效果，如图，手指滑动时，内容向左滑动。
主要代码如下：
一、js代码：
// pages/index/index.js
const app = getApp()
Page({
data: {
del\_id: 0,
},
onLoad: function (options) {
var list=\[{addr\_id: "8",
address: "广东省广州市四川省新港中路397号",
is\_default: "0",
receiver\_name: "张三",
telphone: "020-81167888"
},{
addr\_id: "7",
address: "辽宁省大连市新港中路39号",
is\_default: "0",
receiver\_name: "张三",
telphone: "020-81167888"
},{
addr\_id: "4",
address: "辽宁省大连市东华门街道小小园11号楼1004-5023",
is\_default: "1",
receiver\_name: "徐连科",
telphone: "13840888081"
}\];
this.setData({
list: list,
})
},
//删除
btn\_del:function(para){
wx.request({
url: '',
data: {
openid:wx.getStorageSync('openid'),
addr\_id: para.currentTarget.dataset.addr\_id,
},
success: function (response) {
wx.showModal({
title: '删除成功',
content: '删除地址成功',
success: function (res) {
if (res.cancel) {
//点击取消,默认隐藏弹框
} else {
//点击确定
wx.redirectTo({
url: '/pages/index/index',
})
}
},
});
}
})
},
radioChange(e) {
wx.request({
url: '',
data: {
openid:wx.getStorageSync('openid'),
addr\_id: e.detail.value,
}
})
},
btn\_add:function(){
wx.redirectTo({
url: '/pages/address/add',
})
},
chooseAddress() {
wx.chooseAddress({
success: (res) => {
wx.request({
url: '',
data: {
openid:wx.getStorageSync('openid'),
receiver\_name: res.userName,
telphone: res.telNumber,
postal\_code: res.postalCode,
province: res.provinceName,
city: res.cityName,
district: res.nationalCode,
address: res.detailInfo,
},
success: function(res){
wx.showModal({
title: '添加成功',
content: '添加地址成功',
success: function (res) {
if (res.cancel) {
//点击取消,默认隐藏弹框
} else {
//点击确定
wx.redirectTo({
url: '/pages/index/index',
})
}
},
});
}
})
},
fail: function(err) {
console.log(err)
}
})
},
btn\_touch:function(e){
var addr\_id = e.currentTarget.dataset.addr\_id;
this.setData({
del\_id: addr\_id,
});
},
btn\_cancel:function(e){
this.setData({
del\_id: 0,
})
},
})
二、WXML代码：
<!–pages/index/index.wxml–>
<view class=“main_view”>
<view class="contain" wx:for="{{list}}" wx:key="addr\_id">
<view class="list" bindtouchmove="btn\_touch" data-addr\_id="{{item.addr\_id}}">
<view class="footer" wx:if="{{del\_id!=item.addr\_id}}">
<view class="footLeft">
<view class="Header">
<view class="title {{item.is\_default === '1' ? 'txt-default' : ''}}">
<text>{{item.receiver\_name}}</text>
<text>{{item.telphone}}</text>
</view>
<view class="v-address">
<text>{{item.address}}</text>
</view>
</view>
</view>
<view class="footRight">
<navigator url="" hover-class="noner">
<view style="text-align:right;">修改</view>
</navigator>
<view class="line"></view>
<view style="text-align:right;" class="{{item.is\_default === '1' ? 'txt-default' : ''}}" data-addr\_id="{{item.addr\_id}}">默认</view>
</view>
</view>
<view class="footer\_long" wx:else>
<view class="footLeft">
<view class="Header">
<view class="title {{item.is\_default === '1' ? 'txt-default' : ''}}">
<text>{{item.receiver\_name}}</text>
<text>{{item.telphone}}</text>
</view>
<view class="v-address">
<text>{{item.address}}</text>
</view>
</view>
</view>
<view class="footRight">
<navigator url="" hover-class="noner">
<view style="text-align:right;">修改</view>
</navigator>
<view class="line"></view>
<view style="text-align:right;" class="{{item.is\_default === '1' ? 'txt-default' : ''}}" data-addr\_id="{{item.addr\_id}}">默认</view>
</view>
<view class="foot-del">
<view style="text-align:right;color:red" bindtap="btn\_cancel">取消</view>
<view class="line"></view>
<view style="text-align:right;color:red" bindtap="btn\_delete" data-addr\_id="{{item.addr\_id}}">删除</view>
</view>
</view>
</view>
</view>
<view class="foot\_margin"></view>
<!-- <navigator url="/pages/address/add" hover-class="noner"></navigator> -->
<view class="v-add\_address" style="bottom:20rpx">
<view class="v-left" bindtap="chooseAddress">导入微信地址</view>
</view>
</view>
三、wxss代码：
/* pages/index/index.wxss */
.contain{
margin-top: 0rpx;
width: 100%;
}
.list{
border-top:13rpx solid \#f2f2f2;
background: \#fff;
width: 100%;
padding: 0rpx 30rpx;
}
.Header{
border-bottom: 1px solid \#f2f2f2;
line-height: 50rpx;
padding-top: 20rpx;
}
.title{
font-size:14px;
}
.footer{
display: flex;
line-height: 82rpx;
color:\#666666;
width: 100%;
}
.footer_long{
display: flex;
line-height: 82rpx;
color:\#666666;
width: 125%;
margin-left: -25%;
}
.footLeft{
flex:3;
padding-left: 36rpx;
}
.footRight{
flex:1;
text-align:right;
margin-right:40rpx;
margin-top: 25rpx;
display: flex;
flex-direction:row-reverse;
}
.foot-del{
flex:1;
text-align:right;
margin-right:40rpx;
margin-top: 25rpx;
display: flex;
flex-direction:row;
}
.line{
height:30rpx;
width:1px;
margin:25rpx 10rpx 10rpx 10rpx;
background: \#888;
}
.nav{
width:100%;
height:89rpx;
display:flex;
justify-content:center;
line-height: 45rpx;
padding-top: 20rpx;
position: relative;
border-top: solid 4rpx \#f1f1f1;
}
.navCent{
width:354rpx;
height: 45rpx;
border-radius: 16rpx;
background: \#ff4200;
border:1px solid \#318cff;
display: flex;
}
.navText{
font-size: 12px;
text-align: center;
color: \#fff;
flex:1;
}
.navClick{
width: 100%;
border-radius: 16rpx;
height: 100%;
background: \#fff;
color: \#318cff;
}
.foot{
width: 100%;
padding:0rpx 56rpx;
padding-bottom: 120rpx;
bottom: 0rpx;
position: fixed;
}
.foot .btn{
border-radius: 30rpx;
height: 98rpx;
line-height: 98rpx;
text-align: center;
background: \#ff4200;
font-size: 18px;
color: \#fff;
width: 634rpx;
}
.foot_margin{
height: 140rpx;
}
.v_empty{
width: 100%;
height: 100%;
background-color: \#fff;
}
.img{
width:100%;
margin-top: 30%;
}
.v-address{
font-size: 24rpx;
color: \#666;
}
.txt-default{
color: \#ff4200;
}
.v-add_address{
display: flex;
flex-direction: row;
width: 100%;
padding:0rpx 56rpx;
bottom: 0rpx;
position: fixed;
text-align: center;
}
.v-left{
background: \#ff4200;
width: 80%;
padding: 20rpx;
border-radius: 10rpx;
color: \#fff;
line-height: 60rpx;
height: 60rpx;
}
完毕。希望能帮到你。
强力驱动