怎么在微信小程序中实现一个左滑修改,删除功能

　　介绍

这期内容当中小编将会给大家带来有关怎么在微信小程序中实现一个左滑修改,删除功能,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。

wxml:

& lt; view 类=皁ffer-item",天气:项=& # 39;{{offerList}} & # 39;比; 　　,& lt; !——这里绑定了刚才说的3个函数分别为,触动,touchM  touchE——比; 　　,& lt; !——这里注意这个,,,这是我们一会再js中,将要设置的样式,——比; 　　,& lt; view 比; 　　& lt;才能view 类=皁ffer-item-top  fl  clearfix", bindtouchstart=皌ouchS", bindtouchmove=皌ouchM", bindtouchend=皌ouchE",材料指数=皗{指数}}“比; 　　& lt;才能navigator  bindtap=& # 39; navigatorTo& # 39;,材料指数=皗{item.id}}“比; 　　,,& lt; view 类=& # 39;内容# 39;比; 　　,,& lt; view 类=& # 39;title  clearfix& # 39;比; 　　,,,& lt; view 类=& # 39;fl # 39;比; 　　,,,{{item.title}}党建项目报价表 　　,,,& lt;/view> 　　,,,& lt; image  src=https://www.yisu.com/zixun/images/right.png”class=癴r”> 　　 　　<视图类='注意clearfix '> 　　<视图类=价格fl的> 　　{{item.create_time}} 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　

wxs:

.offer-item  { 　　,身高:150 rpx; 　　,宽度:100大众; 　　,overflow-x:隐藏; 　　,边界底部:1 px  solid  # f0f0f0; 　　} 　　 　　.offer-item> view  { 　　,位置:绝对; 　　,/*宽度:钙(100%,+,200 rpx); */,身高:150 rpx;, 　　} 　　 　　.offer-item  .offer-item-top  { 　　,高度:100%; 　　} 　　 　　.offer-item  .offer-item-top  navigator  { 　　,显示:inline-block; 　　大众,宽度:100,, 　　,高度:100%; 　　} 　　 　　.offer-item  .content  { 　　,填充:35 rpx  30 rpx; 　　,位置:相对; 　　,高度:钙(100%,安康;70 rpx); 　　} 　　 　　.offer-item  .title  .fl  { 　　,显示:inline-block; 　　,宽度:78%; 　　,溢出:隐藏; 　　,文本溢出:省略; 　　,空白:nowrap;} 　　,字体大小:30 rpx; 　　,颜色:# 333; 　　} 　　 　　.offer-item  .title  .fr  { 　　,显示:inline-block; 　　,宽度:20 rpx; 　　,高度:26 rpx; 　　,margin-top: 5 rpx; 　　} 　　 　　.offer-item  .note  { 　　,位置:绝对; 　　,左:30 rpx; 　　,底部:35 rpx; 　　,宽度:钙(100 vw 作用;60 rpx); 　　,字体大小:24 rpx; 　　,颜色:# 999; 　　} 　　 　　.offer-item  .posit  { 　　,宽度:200 rpx; 　　,身高:150 rpx; 　　,行高:150 rpx; 　　,text-align:中心; 　　,显示:没有 　　} 　　 　　.posit.isMove  { 　　,显示:inline-block; 　　,位置:绝对; 　　} 　　 　　.posit.isMove[隐藏],{ 　　,显示:没有 　　} 　　 　　.offer-item  .posit> view  { 　　,显示:inline-block; 　　,宽度:100 rpx; 　　} 　　 　　.offer-item  .posit>观点:first-of-type  { 　　,背景颜色:# FED847; 　　} 　　 　　.offer-item  .posit>观点:last-of-type  { 　　,背景颜色:# C71B1B; 　　} 　　 　　.offer-item  .posit  image  { 　　,显示:inline-block; 　　,宽度:36 rpx; 　　,高度:36 rpx; 　　}

js:

let  len =, 0;,,,//,初次加载长度 　　let  hadLastPage =,假的,,//,判断是否到最后一页 　　 　　var  initdata =, function  (), { 　　,var  list =that.data.offerList 　　,for  (var 小姐:=,0;,小姐:& lt;, list.length;,我+ +),{ 　　,名单[我].txtStyle =,““ 　　,名单[我].isMove =,假; 　　,} 　　that.setData({大敌; 　　,offerList:列表 　　,}) 　　} 　　 　　页面({ 　　,数据:{ 　　,offerList: [ 　　 　　,), 　　100年,delBtnWidth:,,,//,删除按钮宽度单位(rpx) 　　}, 　　 　　 　　,//手指刚放到屏幕触发 　　,触动:function  (e), { 　　,console.log (“touchS", +, e); 　　,//initdata(这个); 　　,//判断是否只有一个触摸点 　　,if  (e.touches.length ==, 1), { 　　this.setData({才能//,才能记录触摸起始位置的X坐标 　　,,startX: e.touches [0] .clientX 　　,,}); 　　,}; 　　,return 假; 　　}, 　　 　　,//触摸时触发,手指在屏幕上每移动一次,触发一次 　　,touchM: function  (e), {=,var  that ; 　　,initdata (,); 　　,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 =,““ 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null

怎么在微信小程序中实现一个左滑修改,删除功能