小程序实现左滑删除功能

本文实例为大家分享了小程序实现左滑删除功能的具体代码，供大家参考，具体内容如下

！-外层包裹视图- view class='cont '！-列表-view wx : for=' { { list } } ' wx : key=' index ' class=' list '！-滑动删除-view BindTouchStart=' TouchS ' BindTouchmove=' TouchM ' BindTouchEnd=' Touch '数据-索引=' { { index } } '样式=' { { item }。shows } } ' class=' list _ del txt '！-列表图片-image class=' list _ img ' mode=' width fix ' src=' http : { { 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 } } ' bind tap=' delItem ' class=' list _ del del '删除/view /view/viewCSS:

/* 父级*/page {底色： # F5 F5} /* 外层视图*/.cont { width : 100%；margin: 0 auto}。列表{位置：相对；高度： 170 rpxmargin : 20 rpx border-radius : 10 rpx；线高： 170 rpx飞越：隐藏；} /* 删除外层包裹视图*/.list _ del { position :绝对值；top:0}。list _ del。txt {位置：相对；背景-color : # fff；宽度： 100%;z指数： 5；划水：0 10 rpextransion :左0.2s轻松进出；空白：无说唱；飞越：隐藏；文本溢出：省略号；} /* 删除*/.list _ del。del {底色： # e 64340宽度： 180 rpx文本对齐：中心；z-index : 4；右： 0；color: #fff } /*列表图片*/.list _ img { width: 105rpx高度： 105 rpx边界半径： 10 rpx垂直对齐： 中间；左边距left : 15 rpxmargin-top :-8 rpx；} /* 列表名称*/.list _ name { position :绝对值；left :168 rpxbottom :18 rpx }/*列表标题*/.list _ title { position :绝对值；right :155 rpxbottom :18 rpxfont-size : 13px；color: # 818181}/*活动时间*/.list _ datas { position : absolute；left :168 rpxtop :35 rpxfont-size : 13px；color: # 818181}js:

//默认声明一个函数记录目录显示的数据-删除状态var init data=function(the){ var list=the。数据。列表为(var I=0；一、清单。长度；i ) { list[i].显示=' ' }。setdata({ list : list })} var app=new GetApp()；页面({ data: { delBtnWidth:185//删除按钮宽度单位(rpx) //列表数据list: [{ //删除状态shows: ' '，//列表中图片图像： '././image/list_img.png '，//昵称名称： '菜鸟老五', //简介标题标题： '主办方：小米科技', //日期数据： ' 2017。02 .21 ' }，{ shows: ' '，image: '././image/list_img.png '，名称为： '菜鸟老五，标题： '主办方：小米科技，数据： ' 2017。02 .21 ' }，{ shows: ' '，image: '././image/list_img.png '，名称为： '菜鸟老五，标题： '主办方：小科技，数据： ' 2017。02 .21 ' }，{ shows: ' '，image: '././image/list_img.png '，名称为： '菜鸟老五，标题： '主办方：小米科技，数据： ' 2017。02 .21 ' }，{ shows: ' '，image: '././image/list_img.png '，名称为： '菜鸟老五，标题： '主办方：小米科技，数据： ' 2017。02 .21 ' }，]，}，onLoad:函数（选项){这个。initelewidth()；}, //开始滑动事件touchS:函数{如果触摸。长度==1){ this。setdata({//设置触摸起始点水平方向位置开始x : e .触摸[0].客户端x })；} }，touchM:函数{ var即=if(e)接触的初始化数据。长度==1){//手指移动时水平方向位置var moveX=e . touch[0]。clientX//手指起始点位置与移动期间的差值var DIsX=这个。数据。startx-moveX；var delBtnWidth=this。数据。delBtnWidth//var Txtstyle=' '；if (disX==0 || disX 0) { //如果移动距离小于等于0,文本层位置不变//txt样式=' left :0 px} else if (disX 0) { //移动距离大于0,文本层左边的值等于手指移动距离//txt style=' left : '-DIsX ' px '；if (disX=delBtnWidth) { //控制手指移动距离最大值为删除按钮的宽度//txt style=' left : '-Delbtnwidth ' px '；} } } }, //滑动中事件触摸：函数{ if(e . changed touch)。长度==1){//手指移动结束后水平位置var endX=e.changedTouches[0].clientX//触摸开始与结束，手指移动的距离var DIsX=这个。数据。startx-ENDx；var delBtnWidth=this。数据。delBtnWidth//如果距离小于删除按钮的1/2,不显示删除按钮var txt style=txt style=DIsX delBtnWidth/2？左侧：-' delBtnWidth ' px ' : '左侧：0 px '；//获取手指触摸的是哪一项var指数=e . target。数据集。指数；var列表=这个。数据。列表；列表[索引]。shows=txtStyleconsole.log('1)，list[index].显示);//更新列表的状态这个。setdata({ list : list })；} else { console。日志(' 2 ')；} }, //获取元素自适应后的实际宽度getEleWidth:函数(w){ var real=0；请尝试{ var res=wx.getSystemInfoSync().window width var scale=(750/2)/(w/2)；//以宽度750像素设计稿做宽度的自适应//console.log(比例尺);真实=数学。下限(RES/scale)；回归真实；} catch(e){ return false；//捕捉错误时做点什么} }，initEleWidth:函数(){ var delBtnWidth=this。getelewidth(这个。数据。delBtnWidth)；这个。setdata({ delBtnWidth : delBtnWidth })；}, //点击删除按钮事件delItem:函数{ var=this//打印出当前选中的索引控制台。日志(例如CurrentTarget。数据集。索引)；//获取到列表数据var list=那个。数据。列表；//删除名单。拼接(例如电流目标。数据集。指数，1)；//重新渲染那个。setdata({ list : list })init data(the)} })以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。