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

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

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： 如何正确下载安装西数主机建站助手？  如何为不同团队 ID 动态生成多个“认领值班”按钮  JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)  JS中页面与页面之间超链接跳转中文乱码问题的解决办法  非常酷的网站设计制作软件,酷培ai教育官方网站？  想要更高端的建设网站，这些原则一定要坚持！  HTML5段落标签p和br怎么选_文本排版常用标签对比【解答】  Laravel如何实现全文搜索功能？（Scout和Algolia示例）  Laravel如何设置定时任务（Cron Job）_Laravel调度器与任务计划配置  东莞市网站制作公司有哪些,东莞找工作用什么网站好？  WordPress 子目录安装中正确处理脚本路径的完整指南  今日头条微视频如何找选题 今日头条微视频找选题技巧【指南】  Edge浏览器提示“由你的组织管理”怎么解决_去除浏览器托管提示【修复】  Win11关机界面怎么改_Win11自定义关机画面设置【工具】  Laravel怎么做缓存_Laravel Cache系统提升应用速度的策略与技巧  简单实现Android文件上传  javascript事件捕获机制【深入分析IE和DOM中的事件模型】  如何在阿里云部署织梦网站？  Laravel如何监控和管理失败的队列任务_Laravel失败任务处理与监控  如何快速生成高效建站系统源代码？  如何用VPS主机快速搭建个人网站？  如何自己制作一个网站链接,如何制作一个企业网站，建设网站的基本步骤有哪些？  *服务器网站为何频现安全漏洞？  详解vue.js组件化开发实践  Laravel如何优雅地处理服务层_在Laravel中使用Service层和Repository层  成都网站制作公司哪家好,四川省职工服务网是做什么用？  Laravel如何连接多个数据库_Laravel多数据库连接配置与切换教程  大连企业网站制作公司,大连2025企业社保缴费网上缴费流程？  Laravel怎么实现搜索功能_Laravel使用Eloquent实现模糊查询与多条件搜索【实例】  Laravel怎么调用外部API_Laravel Http Client客户端使用  Laravel的辅助函数有哪些_Laravel常用Helpers函数提高开发效率  昵图网官网入口 昵图网素材平台官方入口  Laravel如何使用Collections进行数据处理？（实用方法示例）  智能起名网站制作软件有哪些,制作logo的软件？  Laravel如何设置自定义的日志文件名_Laravel根据日期或用户ID生成动态日志【技巧】  Laravel怎么返回JSON格式数据_Laravel API资源Response响应格式化【技巧】  Python图片处理进阶教程_Pillow滤镜与图像增强  Laravel Seeder怎么填充数据_Laravel数据库填充器的使用方法与技巧  Python文件异常处理策略_健壮性说明【指导】  html文件怎么打开证书错误_https协议的html打开提示不安全【指南】  Laravel路由怎么定义_Laravel核心路由系统完全入门指南  香港服务器选型指南：免备案配置与高效建站方案解析  php在windows下怎么调试_phpwindows环境调试操作说明【操作】  大连 网站制作,大连天途有线官网？  如何实现javascript表单验证_正则表达式有哪些实用技巧  php 三元运算符实例详细介绍  php中::能调用final静态方法吗_final修饰静态方法调用规则【解答】  Bootstrap CSS布局之列表  Python自然语言搜索引擎项目教程_倒排索引查询优化案例  免费制作统计图的网站有哪些,如何看待现如今年轻人买房难的情况？