本文实例为大家分享了小程序实现左滑删除功能的具体代码，供大家参考，具体内容如下
<!-- 外层包裹视图 -->
<view class="cont">
<!-- 列表 -->
<view wx:for="{{list}}" wx:key="index" class="list">
<!-- 滑动删除 -->
<view bindtouchstart="touchS" bindtouchmove="touchM" bindtouchend="touchE" data-index="{{index}}" style="{{item.shows}}" class="list_del txt">
<!-- 列表图片 -->
<image class="list_img" mode="widthFix" src="{{item.image}}"></image>
<!-- 列表名称 -->
<text class='list_name'>{{item.name}}</text>
<!-- 列表标题 -->
<label class='list_title'>{{item.title}}</label>
<!-- 活动时间 -->
<text class='list_datas'>活动时间:{{item.datas}}</text>
</view>
<!-- 删除 -->
<view data-index="{{index}}" bindtap="delItem" class="list_del del">删除</view>
</view>
</view>
CSS:
/* 父级 */
page{
background-color: #f5f5f5;
}
/* 外层视图 */
.cont{
width: 100%;
margin: 0 auto;
}
.list{
position: relative;
height: 170rpx;
margin: 20rpx;
border-radius: 10rpx;
line-height: 170rpx;
overflow: hidden;
}
/* 删除外层包裹视图 */
.list_del{
position: absolute;
top:0;
}
.list_del.txt{
position: relative;
background-color: #fff;
width: 100%;
z-index: 5;
padding:0 10rpx;
transition: left 0.2s ease-in-out;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
/* 删除 */
.list_del.del{
background-color: #e64340;
width: 180rpx;text-align: center;
z-index: 4;
right: 0;
color: #fff
}
/* 列表图片 */
.list_img{
width: 105rpx;
height: 105rpx;
border-radius: 10rpx;
vertical-align: middle;
margin-left: 15rpx;
margin-top: -8rpx;
}
/* 列表名称 */
.list_name{
position: absolute;
left:168rpx;
bottom:18rpx;
}
/* 列表标题 */
.list_title{
position: absolute;
right:155rpx;
bottom:18rpx;
font-size: 13px;
color: #818181;
}
/* 活动时间 */
.list_datas{
position: absolute;
left:168rpx;
top:35rpx;
font-size: 13px;
color: #818181;
}
js：
// 默认声明一个函数记录list显示的数据---删除状态
var initdata = function(that) {
var list = that.data.list
for (var i = 0; i < list.length; i++) {
list[i].shows = ""
}
that.setData({
list: list
})
}
var app = new getApp();
Page({
data: {
delBtnWidth: 185, //删除按钮宽度单位（rpx）
// 列表数据
list: [{
// 删除状态
shows: "",
// 列表中图片
image: "../../image/list_img.png",
// 昵称
name: "菜鸟老五",
// 简介title
title: "主办方：小米科技",
// 日期
datas: "2017.02.21"
},
{
shows: "",
image: "../../image/list_img.png",
name: "菜鸟老五",
title: "主办方：小米科技",
datas: "2017.02.21"
},
{
shows: "",
image: "../../image/list_img.png",
name: "菜鸟老五",
title: "主办方：小科技",
datas: "2017.02.21"
},
{
shows: "",
image: "../../image/list_img.png",
name: "菜鸟老五",
title: "主办方：小米科技",
datas: "2017.02.21"
},
{
shows: "",
image: "../../image/list_img.png",
name: "菜鸟老五",
title: "主办方：小米科技",
datas: "2017.02.21"
},
],
},
onLoad: function(options) {
this.initEleWidth();
},
// 开始滑动事件
touchS: function(e) {
if (e.touches.length == 1) {
this.setData({
//设置触摸起始点水平方向位置
startX: e.touches[0].clientX
});
}
},
touchM: function(e) {
var that = this;
initdata(that)
if (e.touches.length == 1) {
//手指移动时水平方向位置
var moveX = e.touches[0].clientX;
//手指起始点位置与移动期间的差值
var disX = this.data.startX - moveX;
var delBtnWidth = this.data.delBtnWidth;
// var txtStyle = "";
if (disX == 0 || disX < 0) { //如果移动距离小于等于0，文本层位置不变
// txtStyle = "left:0px";
} else if (disX > 0) { //移动距离大于0，文本层left值等于手指移动距离
// txtStyle = "left:-" + disX + "px";
if (disX >= delBtnWidth) {
//控制手指移动距离最大值为删除按钮的宽度
// txtStyle = "left:-" + delBtnWidth + "px";
}
}
}
},
// 滑动中事件
touchE: function(e) {
if (e.changedTouches.length == 1) {
//手指移动结束后水平位置
var endX = e.changedTouches[0].clientX;
//触摸开始与结束，手指移动的距离
var disX = this.data.startX - endX;
var delBtnWidth = this.data.delBtnWidth;
//如果距离小于删除按钮的1/2，不显示删除按钮
var txtStyle = "";
txtStyle = disX > delBtnWidth / 2 ? "left:-" + delBtnWidth + "px" : "left:0px";
//获取手指触摸的是哪一项
var index = e.target.dataset.index;
var list = this.data.list;
list[index].shows = txtStyle;
console.log("1", list[index].shows);
//更新列表的状态
this.setData({
list: list
});
} else {
console.log("2");
}
},
//获取元素自适应后的实际宽度
getEleWidth: function(w) {
var real = 0;
try {
var res = wx.getSystemInfoSync().windowWidth;
var scale = (750 / 2) / (w / 2); //以宽度750px设计稿做宽度的自适应
// console.log(scale);
real = Math.floor(res / scale);
return real;
} catch (e) {
return false;
// Do something when catch error
}
},
initEleWidth: function() {
var delBtnWidth = this.getEleWidth(this.data.delBtnWidth);
this.setData({
delBtnWidth: delBtnWidth
});
},
//点击删除按钮事件
delItem: function(e) {
var that = this;
// 打印出当前选中的index
console.log(e.currentTarget.dataset.index);
// 获取到列表数据
var list = that.data.list;
// 删除
list.splice(e.currentTarget.dataset.index, 1);
// 重新渲染
that.setData({
list: list
})
initdata(that)
}
})
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持北冥有鱼。
您可能感兴趣的文章:
- 微信小程序左滑删除功能开发案例详解
- 微信小程序列表中item左滑删除功能
- 微信小程序 侧滑删除（左滑删除）
- 微信小程序左滑删除效果的实现代码
- 微信小程序实现左滑修改、删除功能
- mpvue小程序仿qq左滑置顶删除组件
- 微信小程序 向左滑动删除功能的实现
- 小程序实现左滑删除效果
