小程序左滑删除

wxml

 

<!--pages/mycollect/mycollect.wxml-->

<!--最外层大盒子 -->

<view class="collect_big_box">

<!--列表盒子 -->

<view class="collect_list_box">

<scroll-view bindscrolltolower="lower" scroll-y="true" style="height: 990rpx;">

<!--中部搜索结果列表盒子-->

<view class="recordList_box">

<!--外层大盒子 -->

<view class="content_box" wx:for="{{arr}}" wx:key="{{key}}">

<!--中部盒子 -->

<view class="view_ce">

<view style="{{item.txtStyle}}" class="content_box_center" bindtouchstart="touchS" bindtouchmove="touchM" bindtouchend="touchE" data-index="{{index}}">

<!--图片盒子 -->

<view class="ProductIco_box">

<image class="ProductIco" src="{{item.img}}"></image>

</view>

<!--内容 -->

<view class="view_content">

<view class='view_title'>{{item.title}}</view>

<view class="view_fl">

<text>{{item.sort}}</text>

<view class="view_btn_box">

<text>{{item.price}}</text>

</view>

</view>

</view>

</view>

</view>

<!--删除按钮 -->

<view class="delete_btn" bindtap='delete_btn' data-index="{{index}}">删除</view>

</view>

</view>

</scroll-view>

 

 

</view> </view>

 

 

 

WXSS

 

page {

background: #f5f5f5;

height: 100%;

}

.collect_list_box {

padding-top: 20rpx;

}

.recordList_box {

box-sizing: border-box;

/* background: #ffffff; */

}

.content_box {

/* border-top: 1rpx solid #dcdcdc; */

border-bottom: 1rpx solid #ececec;

position: relative;

}

.ProductIco_box {

width: 130rpx;

height: 130rpx;

border-radius: 5px;

border: 1rpx solid #ececec;

margin-right: 18rpx;

float: left;

}

.ProductIco {

width: 100%;

height: 100%;

border-radius: 5px;

}

.view_ce {

width: 100%;

height: 130rpx;

position: relative;

padding-top: 20rpx;

padding-bottom: 30rpx;

/* background: red; */

border-bottom: 1rpx solid #ececec;

}

.content_box_center {

width: 100%;

padding: 0rpx 20rpx 30rpx 20rpx;

padding-top: 20rpx;

/* margin-bottom: 30rpx; */

height: 182rpx;

z-index: 2;

background: #fff;

position: absolute;

left: 0;

top: 0;

box-sizing: border-box;

border-bottom: 1rpx solid #ececec;

}

.view_content {

float: left;

width: 556rpx;

}

.view_title {

display: inline-block;

float: left;

width: 556rpx;

font-size: 28rpx;

color: #393939;

}

.view_fl>text {

font-size: 22rpx;

color: #898989;

margin-right: 18rpx;

}

.view_btn_box>text {

font-size: 28rpx;

color: #f55212;

}

.view_btn {

width: 150rpx;

height: 44rpx;

border: 1px solid #cecece;

border-radius: 5px;

float: right;

font-size: 22rpx;

color: #898989;

line-height: 44rpx;

/* display: none; *//* margin-bottom: 5rpx; */

}

.view_text_center, .view_img_left, .view_img_right {

float: left;

}

.view_img_left, .view_img_right {

width: 44rpx;

height: 44rpx;

}

.view_img_left {

border-right: 1rpx solid #cecece;

}

.view_img_right {

border-left: 1rpx solid #cecece;

}

.view_text_center {

width: 58rpx;

height: 44rpx;

text-align: center;

line-height: 44rpx;

box-sizing: border-box;

font-size: 22rpx;

color: #898989;

}

.view_btn image {

width: 100%;

height: 100%;

}

.view_add {

width: 44rpx;

height: 44rpx;

border: 1px solid #cecece;

border-radius: 5px;

float: right;

font-size: 22rpx;

color: #898989;

line-height: 44rpx;

/* margin-bottom: 5rpx; */

}

.view_img_add {

width: 44rpx;

height: 44rpx;

}

.view_add image {

width: 100%;

height: 100%;

}

.delete_btn {

position: absolute;

right: 0;

top: 0;

font-size: 32rpx;

background: #ff3b30;

width: 134rpx;

height: 100%;

text-align: center;

line-height: 175rpx;

/* border-bottom: 1px solid #ff3b30; */

color: #fff;

z-index: 1;

}

 

JS

 

 

Page({

 

/**

* 页面的初始数据

*/

data: {

// 数据

arr: [

{ "txtStyle": "1", img: "http://i1.umei.cc/uploads/tu/201806/9999/02218db8bd.jpg", title: "老五", sort: "你是DJ吗", price: "Can I help you", num: 1,state:1},

{ "txtStyle": "1", img: "http://i1.umei.cc/uploads/tu/201806/9999/02218db8bd.jpg", title: "老五", sort: "I dont no", price: "yes,you Can", num: 1 },

],

delBtnWidth: 134,//删除按钮宽度单位（rpx）

},

// 滚动到底部

lower: function () {

console.log("我到了底部")

},

//删除

delete_btn: function (e) {

var that = this;

var index = e.currentTarget.dataset.index;

wx.showModal({

// title: '提示',

content: '确定删除吗？',

confirmColor: '#1da1f2',

success: function (res) {

if (res.confirm) {

console.log(index)

var list = that.data.arr;

//移除列表中下标为index的项

list.splice(index, 1);

//更新列表的状态

that.setData({

arr: list

});

} else if (res.cancel) {

console.log('用户点击取消')

}

}

})

 

},

 

//手指刚放到屏幕触发

touchS: function (e) {

// console.log(e);

//判断是否只有一个触摸点

if (e.touches.length == 1) {

this.setData({

//记录触摸起始位置的X坐标

startX: e.touches[0].clientX

});

}

},

//触摸时触发，手指在屏幕上每移动一次，触发一次

touchM: function (e) {

// console.log(e);

var that = this

if (e.touches.length == 1) {

//记录触摸点位置的X坐标

var moveX = e.touches[0].clientX;

//计算手指起始点的X坐标与当前触摸点的X坐标的差值

var disX = that.data.startX - moveX;

//delBtnWidth 为右侧按钮区域的宽度

var delBtnWidth = that.data.delBtnWidth;

var txtStyle = "";

if (disX == 0 || disX < 0) {//如果移动距离小于等于0，文本层位置不变

txtStyle = "left:0rpx";

} else if (disX > 0) {//移动距离大于0，文本层left值等于手指移动距离

txtStyle = "left:-" + disX + "rpx";

if (disX >= delBtnWidth) {

//控制手指移动距离最大值为删除按钮的宽度

txtStyle = "left:-" + delBtnWidth + "rpx";

}

}

//获取手指触摸的是哪一个item

var index = e.currentTarget.dataset.index;

var list = that.data.arr;

//将拼接好的样式设置到当前item中

list[index].txtStyle = txtStyle;

//更新列表的状态

this.setData({

arr: list

});

}

},

touchE: function (e) {

// console.log(e);

var that = this

if (e.changedTouches.length == 1) {

//手指移动结束后触摸点位置的X坐标

var endX = e.changedTouches[0].clientX;

//触摸开始与结束，手指移动的距离

var disX = that.data.startX - endX;

var delBtnWidth = that.data.delBtnWidth;

//如果距离小于删除按钮的1/2，不显示删除按钮

var txtStyle = disX > delBtnWidth / 2 ? "left:-" + delBtnWidth + "rpx" : "left:0rpx";

//获取手指触摸的是哪一项

var index = e.currentTarget.dataset.index;

var list = that.data.arr;

list[index].txtStyle = txtStyle;

//更新列表的状态

that.setData({

arr: list

});

}

},

 

})