小程序实现左滑删除功能
程序员文章站
2022-10-08 13:16:16
本文实例为大家分享了小程序实现左滑删除功能的具体代码,供大家参考,具体内容如下
本文实例为大家分享了小程序实现左滑删除功能的具体代码,供大家参考,具体内容如下
<!-- 外层包裹视图 --> <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) } })
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: AI利用钢笔工具绘制梭形图形
下一篇: PHP函数实现分页含文本分页和数字分页