示例：
其实也算是挺简单的一个功能：
首先我们可以将页面画出来
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">{{item.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">{{item.inforNum}}</view>
</view>
</view>
<view class="remove" data-index="{{index}}" bindTap="delTap">删除</view>
</view>
</view>
</view>
wxss
/* pages/actiondetail/index.wxss */
.inforList{
100%;
display: flex;
flex-direction: column;
}
.inforList .list{
height: calc(139rpx - 24rpx);
calc(100% - 60rpx);
display: flex;
padding: 24rpx 30rpx 0 30rpx;
position: relative;
}
.list .infor_img{
90rpx;
height: 90rpx;
margin-right: 30rpx;
}
.list .content{
calc(100% - 120rpx);
height: 100%;
border-bottom: 1rpx solid #E5E5E5;
}
.content .con_top{
height: 40rpx;
100%;
display: flex;
}
.con_top .con_right{
calc(100% - 100rpx);
display: flex;
}
.con_top .vip{
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;
100rpx;
}
.content .con_bottom{
margin-top: 15rpx;
height: calc(100% - 55rpx);
100%;
display: flex;
justify-content: space-between;
}
.con_bottom .infor_near{
calc(100% - 50px);
color: #999999;
font-size: 26rpx;
overflow: hidden;
height: 38rpx;
}
.con_bottom .infor_num{
30rpx;
height: 30rpx;
border-radius: 50%;
text-align: center;
line-height: 30rpx;
background: #FF4444;
color: #ffffff;
font-size: 20rpx;
}
.list .remove{
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 this.data.inforList) {
var item = this.data.inforList[index]
item.left = 0
}
this.setData({
inforList: this.data.inforList,
startX: touch.clientX,
})
},
drawMove: function (e) {
console.log("drawMove")
var touch = e.touches[0]
console.log(touch)
var item = this.data.inforList[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: this.data.inforList
})
} else {
item.left = 0
this.setData({
inforList: this.data.inforList
})
}
},
drawEnd: function (e) {
console.log("drawEnd")
var touch = e.touches[0]
console.log(e, touch)
var item = this.data.inforList[e.currentTarget.dataset.index]
if (item.left <= -70) {
item.left = -140
this.setData({
inforList: this.data.inforList,
})
} else {
item.left = 0
this.setData({
inforList: this.data.inforList,
})
}
},
delTap (e) {
var index = e.currentTarget.dataset.index
var arr = []
this.data.inforList.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 () {
}
})
这样我们就实现了向左滑动出现删除功能