微信小程序 侧滑删除（左滑删除）

微信小程序 侧滑删除（左滑删除）

如图所示，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> 

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

# 微信小程序  # 侧滑删除（左滑删除）  # 小程序  # 侧滑删除  # 微信小程序 向左滑动删除功能的实现  # 微信小程序左滑删除效果的实现代码  # 微信小程序实现左滑修改、删除功能  # 微信小程序列表中item左滑删除功能  # 微信小程序uniapp实现左滑删除效果(完整代码)  # 微信小程序实现左滑动删除效果  # 微信小程序实现收货地址左滑删除  # 微信小程序左滑删除功能开发案例详解  # 微信小程序左滑删除实现代码实例  # 微信小程序实现左滑删除效果源码  # 的是  # 自适应  # 哪一项  # 我在  # 起始点  # 基础上  # 希望能  # 跳转  # 谢谢大家  # 中要  # 值为  # 移除  # 如图所示  # 结束后  # 列表中  # gt  # px  # Math  # floor  # target 

相关文章： 品牌网站制作公司有哪些,买正品品牌一般去哪个网站买？  建站之星备案是否影响网站上线时间？  如何通过.red域名打造高辨识度品牌网站？  高防网站服务器：DDoS防御与BGP线路的AI智能防护方案  盘锦网站制作公司,盘锦大洼有多少5G网站？  高端云建站费用究竟需要多少预算？  如何在阿里云服务器自主搭建网站？  网站制作说明怎么写,简述网页设计的流程并说明原因？  如何通过二级域名建站提升品牌影响力？  建站之星如何防范黑客攻击与数据泄露？  香港服务器租用每月最低只需15元？  网站制作大概要多少钱一个,做一个平台网站大概多少钱？  股票网站制作软件,网上股票怎么开户？  如何快速登录WAP自助建站平台？  简易网站制作视频教程,使用记事本编写一个简单的网页html文件？  导航网站建站方案与优化指南：一站式高效搭建技巧解析  常州企业网站制作公司,全国继续教育网怎么登录？  Python如何创建带属性的XML节点  网站制作难吗安全吗,做一个网站需要多久时间？  nginx修改上传文件大小限制的方法  rsync同步时出现rsync: failed to set times on “xxxx”: Operation not permitted  外汇网站制作流程,如何在工商银行网站上做外汇买卖？  如何选择可靠的免备案建站服务器？  武汉网站如何制作,黄黄高铁武穴北站途经哪些村庄？  ,交易猫的商品怎么发布到网站上去？  子杰智能建站系统｜零代码开发与AI生成SEO优化指南  javascript基本数据类型及类型检测常用方法小结  微信网站制作公司有哪些,民生银行办理公司开户怎么在微信网页上查询进度？  高性能网站服务器部署指南：稳定运行与安全配置优化方案  个人网站制作流程图片大全,个人网站如何注销？  宝华建站服务条款解析：五站合一功能与SEO优化设置指南  网站制作多少钱一个,建一个论坛网站大约需要多少钱？  在线流程图制作网站手机版,谁能推荐几个好的CG原画资源网站么？  Swift中switch语句区间和元组模式匹配  建站主机与服务器功能差异如何区分？  如何通过山东自助建站平台快速注册域名？  北京网站制作网页,网站升级改版需要多久？  常州自助建站工具推荐：低成本搭建与模板选择技巧  如何用好域名打造高点击率的自主建站？  如何快速搭建个人网站并优化SEO？  建站org新手必看：2024最新搭建流程与模板选择技巧  c++如何打印函数堆栈信息_c++ backtrace函数与符号名解析【方法】  如何在宝塔面板中创建新站点？  建站之星如何通过成品分离优化网站效率？  如何零基础在云服务器搭建WordPress站点？  如何高效配置香港服务器实现快速建站？  网页设计与网站制作内容,怎样注册网站？  杭州银行网站设计制作流程,杭州银行怎么开通认证方式？  专业网站制作服务公司,有哪些网站可以免费发布招聘信息？  公司门户网站制作公司有哪些,怎样使用wordpress制作一个企业网站？