微信小程序信息会话列表删除功能

微信⼩程序信息会话列表删除功能
⽰例：
其实也算是挺简单的⼀个功能：
⾸先我们可以将页⾯画出来
wxml
<view style="background:#F7F7F7;height:100%;">
<view class="inforList">
<view wx:for="{{inforList}}" wx:key="index" class="list" bindtouchstart="drawStart" bindtouchmove="drawMove" bindtouchend="drawEnd" style="left:{{item.left}}rpx" data-index="{{index}}" bindtap="inforTap"> <image src="{{item.src}}" class="infor_img"></image>
<view class="content">
<view class="con_top">
<view class="con_right">
<view class="vip" style="{{item.isVIP?'background:#F53249;':'background:#b7b7b7;'}}">vip</view>
<view class="infor_name">{{}}</view>
</view>
<view class="infor_time">{{item.time}}</view>
</view>
<view class="con_bottom">
<view class="infor_near">{{item.nearInformation}}</view>
<view class="infor_num">{{rNum}}</view>
</view>
</view>
<view class="remove" data-index="{{index}}" bindTap="delTap">删除</view>
</view>
</view>
</view>
wxss
/* pages/actiondetail/index.wxss */
.inforList{
width: 100%;
display: flex;
flex-direction: column;
}
.inforList .list{
height: calc(139rpx - 24rpx);
width: calc(100% - 60rpx);
display: flex;
padding: 24rpx 30rpx 0 30rpx;
position: relative;
}
.list .infor_img{
width: 90rpx;
height: 90rpx;
margin-right: 30rpx;
}
.list .content{
width: calc(100% - 120rpx);
height: 100%;
border-bottom: 1rpx solid #E5E5E5;
}
.content .con_top{
height: 40rpx;
width: 100%;
display: flex;
}
.con_top .con_right{
width: calc(100% - 100rpx);
display: flex;
}
.con_top .vip{
width: 58rpx;
height: 32rpx;
border-radius: 16rpx;
color: #ffffff;
font-size: 20rpx;
text-align: center;
line-height: 30rpx;
margin-right: 15rpx;
margin-top: 6rpx;
}
.con_top .infor_name{
color: #333333;
font-size: 32rpx;
}
.con_top .infor_time{
color: #aaaaaa;
font-size: 22rpx;
width: 100rpx;
}
.content .con_bottom{
margin-top: 15rpx;
height: calc(100% - 55rpx);
width: 100%;
display: flex;
justify-content: space-between;
}
.con_bottom .infor_near{
width: calc(100% - 50px);
color: #999999;
font-size: 26rpx;
overflow: hidden;
height: 38rpx;
}
.con_bottom .infor_num{
width: 30rpx;
height: 30rpx;
border-radius: 50%;
text-align: center;
line-height: 30rpx;
background: #FF4444;
color: #ffffff;
font-size: 20rpx;
}
.list .remove{
width: 140rpx;
height: 139rpx;
background: #FF5C5C;
text-align: center;
line-height: 139rpx;
font-size: 34rpx;
color: #ffffff;
position: absolute;
right: -140rpx;
top: 0;
}
js⾥⾯加⼀点假数据
data: {
name: '',
inforList: [
{
src: '/imgs/homeicon-1shoulder.png',
isVIP: true,
name: '齐磊',
time: '11⼩时前',
nearInformation: '这是⼀条最近的消息',
inforNum: 3,
left: 0
},
{
src: '/imgs/homeicon-3back.png',
isVIP: true,
name: '王⼀',
time: '1⼩时前',
nearInformation: '这是内容',
inforNum: 1,
left: 0
},
{
src: '/imgs/homeicon-6Buttock.png',
isVIP: true,
name: '李⼆',
time: '15⼩时前',
nearInformation: '这是⼀条最近的消息这是⼀条最近的消息这是⼀条最近的消息',
inforNum: 5,
left: 0
},
{
src: '/imgs/homeicon-8Aerobic.png',
isVIP: true,
name: '张三',
time: '⼀天前',
nearInformation: '这是⼀条最近的消息',
inforNum: 2,
left: 0
}
],
startX: 0
},
这样我们基本的页⾯就出来了
其次我们该考虑怎么样实现左滑出现删除呢
这⾥我的做法很简单，那就是控制它的left值（css⾥⾯我给他定位了），删除在最右边我们可以修改left值查看n那么接下来就是考虑⽤什么⽅法控制他的left值，这⾥就⽤到了官⽹⾥⾯给的三个⽅法
那么我们就试着⽤⽤他
// pages/actiondetail/index.js
Page({
/**
* 页⾯的初始数据
*/
data: {
name: '',
inforList: [
{
src: '/imgs/homeicon-1shoulder.png',
isVIP: true,
name: '齐磊',
time: '11⼩时前',
nearInformation: '这是⼀条最近的消息',
inforNum: 3,
left: 0
},
{
src: '/imgs/homeicon-3back.png',
isVIP: true,
name: '王⼀',
time: '1⼩时前',
nearInformation: '这是内容',
inforNum: 1,
left: 0
},
{
src: '/imgs/homeicon-6Buttock.png',
isVIP: true,
name: '李⼆',
time: '15⼩时前',
nearInformation: '这是⼀条最近的消息这是⼀条最近的消息这是⼀条最近的消息', inforNum: 5,
left: 0
},
{
src: '/imgs/homeicon-8Aerobic.png',
isVIP: true,
name: '张三',
time: '⼀天前',
nearInformation: '这是⼀条最近的消息',
inforNum: 2,
left: 0
}
],
startX: 0
},
/**
* ⽣命周期函数--监听页⾯加载
*/
onLoad: function (options) {
},
drawStart: function (e) {
console.log("drawStart")
var touch = e.touches[0]
console.log(touch)
for(var index in rList) {
var item = rList[index]
item.left = 0
}
this.setData({
inforList: rList,
startX: touch.clientX,
})
},
drawMove: function (e) {
console.log("drawMove")
var touch = e.touches[0]
console.log(touch)
var item = rList[e.currentTarget.dataset.index]
var disX = this.data.startX - touch.clientX
if (disX >= 10) {
if (disX > 140) {
item.left = -140
} else {
item.left = '-' + disX
}
this.setData({
inforList: rList
})
} else {
item.left = 0
this.setData({
inforList: rList
})
}
},
drawEnd: function (e) {
console.log("drawEnd")
var touch = e.touches[0]
console.log(e, touch)
var item = rList[e.currentTarget.dataset.index] if (item.left <= -70) {
item.left = -140
this.setData({
inforList: rList,
})
} else {
item.left = 0
this.setData({
inforList: rList,
})
}
},
delTap (e) {
var index = e.currentTarget.dataset.index
var arr = []
rList.filter((item, idx) => {
if (index != idx) {
arr.push(item)
}
})
this.setData({
inforList: arr
})
},
/**
* ⽣命周期函数--监听页⾯初次渲染完成
*/
onReady: function () {
},
/**
* ⽣命周期函数--监听页⾯显⽰
*/
onShow: function () {
},
/**
* ⽣命周期函数--监听页⾯隐藏
*/
onHide: function () {
},
/**
* ⽣命周期函数--监听页⾯卸载
*/
onUnload: function () {
},
/**
* 页⾯相关事件处理函数--监听⽤户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页⾯上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* ⽤户点击右上⾓分享
*/
onShareAppMessage: function () {
}
})
这样我们就实现了向左滑动出现删除功能。