示例：
其實也算是挺簡單的一個功能：
首先我們可以將頁面畫出來
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{
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 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 () {
}
})
這樣我們就實現了向左滑動出現刪除功能