每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
相關文章
視圖===============================ide
<view class='box'>this
<block>get
<view class='item' wx:for='{{list}}' wx:for-item='item' wx:key='*this' wx:for-index="index">it
<view class='info' style='left:{{item.left}}rpx;' data-index="{{index}}" bindtouchstart="startHandle" bindtouchmove="moveHandle" bindtouchend="endHandle">io
<text>{{item.name}}</text><text>{{item.address}}</text><text>{{item.time}}</text>console
</view>ast
<view class='delete' bindtap='delete'data-index="{{index}}">刪除</view>class
</view>map
</block>im
</view>
樣式=========================================
page{
font-size: 32rpx;
color: #555;
}
.box{
width: 750rpx;
}
.item{
width: 750rpx;
height: 100rpx;
position: relative;
line-height: 100rpx;
border-bottom: 1rpx solid #cecece;
}
.info{
width: 750rpx;
height: 100rpx;
position: absolute;
top: 0;
background: #fff;
z-index: 10;
}
.delete{
width: 100rpx;
height: 96rpx;
position: absolute;
top: 2rpx;
right: 2rpx;
background: red;
color: #fff;
text-align: center;
line-height: 100rpx;
z-index: 0;
}
js =================================
// pages/slider/slider.js
Page({
/**
* 頁面的初始數據
*/
data: {
list: [
{ name: 'XXXX', address: 'XXXXXXXX', time: '2018-10-24', left: 0 },
{ name: 'XXXX', address: 'XXXXXXXX', time: '2018-10-24', left: 0 },
{ name: 'XXXX', address: 'XXXXXXXX', time: '2018-10-24', left: 0 },
{ name: 'XXXX', address: 'XXXXXXXX', time: '2018-10-24', left: 0 },
{ name: 'XXXX', address: 'XXXXXXXX', time: '2018-10-24', left: 0 },
{ name: 'XXXX', address: 'XXXXXXXX', time: '2018-10-24', left: 0 }
],
startX: '',
},
// 左滑刪除
startHandle(e) {
let list = this.data.list.map((item) => {
item.left = 0;
return item;
});
if (e.changedTouches.length == 1) {
let startX = e.changedTouches[0].pageX
this.setData({
startX: startX
})
}
},
moveHandle(e) {
let startX = this.data.startX;
let list = this.data.list;
let index = e.currentTarget.dataset.index;
if (e.changedTouches.length == 1) {
let moveX = e.changedTouches[0].pageX
let disX = moveX - startX
if (disX < -130) {
disX = -130
}
if (disX > 0) {
disX = 0
}
list[index].left = disX;
this.setData({
list: list
})
}
},
endHandle(e) {
let startX = this.data.startX;
let list = this.data.list;
let index = e.currentTarget.dataset.index;
if (e.changedTouches.length == 1) {
let endX = e.changedTouches[0].pageX;
let disX = endX - startX
if (disX <= -75) {
disX = -130
} else {
disX = 0
}
if (disX > 0) {
disX = 0
}
list[index].left = disX;
this.setData({
list: list
})
}
},
delete(e) {
console.log(e)
let index = e.currentTarget.dataset.index;
let list = this.data.list;
list.splice(index, 1)
this.setData({
list: list
})
wx.showToast({
title: '刪除成功',
icon: 'success',
duration: 2000
})
}
})
//簡單的左滑刪除