本文实例为大家分享了小程序实现左滑删除功能的具体代码，供大家参考，具体内容如下
我要评论
<!-- 外层包裹视图 -->
<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)
}
})
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问， 点击进行留言回复！！
vuejs （2）- Vue 生命周期 和 VueJS ajax
网友评论