欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

微信小程序 侧滑删除(左滑删除)

程序员文章站 2023-11-25 11:53:40
微信小程序 侧滑删除(左滑删除) 如图所示,demo是小程序的侧滑删除,这个是我在别人写的例子的基础上修改的。代码如下 js文件代码: // pa...

微信小程序 侧滑删除(左滑删除)

微信小程序 侧滑删除(左滑删除)

如图所示,demo是小程序的侧滑删除,这个是我在别人写的例子的基础上修改的。代码如下

js文件代码:

// pages/leftswiperdel/index.js 
 
var initdata = function (that) { 
 var list = that.data.list 
 for (var i = 0; i < list.length; i++) { 
  list[i].txtstyle = "" 
 } 
 that.setdata({ list: list }) 
} 
 
page({ 
 data: { 
  delbtnwidth: 180,//删除按钮宽度单位(rpx) 
  list: [ 
   { 
    txtstyle: "", 
    icon: "/images/qcm.png", 
    txt: "指尖快递" 
   }, 
   { 
    txtstyle: "", 
    icon: "/images/qcm.png", 
    txt: "指尖快递" 
   }, 
   { 
    txtstyle: "", 
    icon: "/images/qcm.png", 
    txt: "指尖快递" 
   }, 
   { 
    txtstyle: "", 
    icon: "/images/qcm.png", 
    txt: "指尖快递" 
   }, 
   { 
    txtstyle: "", 
    icon: "/images/qcm.png", 
    txt: "指尖快递" 
   }, 
   { 
    txtstyle: "", 
    icon: "/images/qcm.png", 
    txt: "指尖快递" 
   }, 
   { 
    txtstyle: "", 
    icon: "/images/qcm.png", 
    txt: "指尖快递" 
   }, 
   { 
    txtstyle: "", 
    icon: "/images/qcm.png", 
    txt: "指尖快递" 
   }, 
   { 
    txtstyle: "", 
    icon: "/images/qcm.png", 
    txt: "指尖快递" 
   }, 
   { 
    txtstyle: "", 
    icon: "/images/qcm.png", 
    txt: "指尖快递" 
   }, 
   { 
    txtstyle: "", 
    icon: "/images/qcm.png", 
    txt: "指尖快递" 
   }, 
 
  ] 
 }, 
 onload: function (options) { 
  // 页面初始化 options为页面跳转所带来的参数 
  this.initelewidth(); 
 }, 
 onready: function () { 
  // 页面渲染完成 
 }, 
 onshow: function () { 
  // 页面显示 
 }, 
 onhide: function () { 
  // 页面隐藏 
 }, 
 onunload: function () { 
  // 页面关闭 
 }, 
 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"; 
    } 
   } 
   //获取手指触摸的是哪一项 
   var index = e.target.dataset.index; 
   var list = this.data.list; 
   list[index].txtstyle = txtstyle; 
   //更新列表的状态 
   this.setdata({ 
    list: list 
   }); 
  } 
 }, 
 
 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 = disx > delbtnwidth / 2 ? "left:-" + delbtnwidth + "px" : "left:0px"; 
   //获取手指触摸的是哪一项 
   var index = e.target.dataset.index; 
   var list = this.data.list; 
   list[index].txtstyle = txtstyle; 
   //更新列表的状态 
   this.setdata({ 
    list: list 
   }); 
  } 
 }, 
 //获取元素自适应后的实际宽度 
 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 
  wx.showmodal({ 
   title: '提示', 
   content: '是否删除?', 
   success: function (res) { 
    if (res.confirm) { 
     //获取列表中要删除项的下标 
     var index = e.target.dataset.index; 
     var list = that.data.list; 
     //移除列表中下标为index的项 
     list.splice(index, 1); 
     //更新列表的状态 
     that.setdata({ 
      list: list 
     }); 
    } else { 
     initdata(that) 
    } 
   } 
  }) 
 
 } 
 
}) 

wxss文件代码:

/* pages/leftswiperdel/index.wxss */ 
view{ 
  box-sizing: border-box; 
} 
.item-box{ 
  width: 700rpx; 
  margin: 0 auto; 
  padding:40rpx 0; 
} 
.items{ 
  width: 100%; 
} 
.item{ 
  position: relative; 
  border-top: 2rpx solid #eee; 
  height: 120rpx; 
  line-height: 120rpx; 
  overflow: hidden; 
} 
.item:last-child{ 
  border-bottom: 2rpx solid #eee; 
} 
.inner{ 
  position: absolute; 
  top:0; 
} 
.inner.txt{ 
  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; 
} 
.inner.del{ 
  background-color: #e64340; 
  width: 180rpx;text-align: center; 
  z-index: 4; 
  right: 0; 
  color: #fff 
} 
.item-icon{ 
  width: 64rpx; 
  vertical-align: middle; 
  margin-right: 16rpx 
} 
.thumb{ 
  width: 200px; 
  height: 200px; 
  -webkit-overflow-scrolling: touch; 
  overflow: scroll; 
} 

wxml文件代码:

<view class="item-box"> 
 <view class="items"> 
  <view wx:for="{{list}}" wx:key="{{index}}" class="item"> 
   <view bindtouchstart="touchs" bindtouchmove="touchm" bindtouchend="touche" data-index="{{index}}" style="{{item.txtstyle}}" class="inner txt"> 
   <image class="item-icon" mode="widthfix" src="{{item.icon}}"></image>{{index}}{{item.txt}}</view> 
   <view data-index="{{index}}" bindtap = "delitem" class="inner del">删除</view> 
  </view> 
 </view> 
</view> 

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!