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


Posted in Javascript onMay 23, 2017

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

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

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

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

Javascript 相关文章推荐
Track Image Loading效果代码分析
Aug 13 Javascript
基于Jquery的动态添加控件并取值的实现代码
Sep 24 Javascript
JS常见问题整理(持续更新)
Aug 06 Javascript
jquery调取json数据实现省市级联的方法
Jan 29 Javascript
jQuery层级选择器用法分析
Feb 10 Javascript
深入解析AngularJS框架中$scope的作用与生命周期
Mar 05 Javascript
ES6中箭头函数的定义与调用方式详解
Jun 02 Javascript
详解Vue路由开启keep-alive时的注意点
Jun 20 Javascript
vue-mugen-scroll组件实现pc端滚动刷新
Aug 16 Javascript
node.js中npm包管理工具用法分析
Feb 14 Javascript
vue通过过滤器实现数据格式化
Jul 20 Javascript
Javascript生成器(Generator)的介绍与使用
Jan 31 Javascript
最常用的jQuery表单验证(简单)
May 23 #jQuery
jquery实现简单实用的轮播器
May 23 #jQuery
vue.js 左侧二级菜单显示与隐藏切换的实例代码
May 23 #Javascript
Bootstrap多级菜单的实现代码
May 23 #Javascript
微信小程序获取用户openId的实现方法
May 23 #Javascript
详解vuex 中的 state 在组件中如何监听
May 23 #Javascript
BootStrap表单控件之文本域textarea
May 23 #Javascript
You might like
php获取远程文件的内容和大小
2015/11/03 PHP
PHP ajax+jQuery 实现批量删除功能实例代码小结
2018/12/06 PHP
php写入mysql中文乱码的实例解决方法
2019/09/17 PHP
Laravel 不同生产环境服务器的判断实践
2019/10/15 PHP
JavaScript 捕获窗口关闭事件
2009/07/26 Javascript
myFocus slide3D v1.1.0 使用方法与下载
2011/01/12 Javascript
JS实现图片翻书效果示例代码
2013/09/09 Javascript
jquery选择器之内容过滤选择器详解
2014/01/27 Javascript
JavaScript实现可拖拽的拖动层Div实例
2015/08/05 Javascript
深入浅析JavaScript系列(13):This? Yes,this!
2016/01/05 Javascript
jquery trigger函数执行两次的解决方法
2016/02/29 Javascript
JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法
2016/06/05 Javascript
jQuery继承extend用法详解
2016/10/10 Javascript
AngularJS的依赖注入实例分析(使用module和injector)
2017/01/19 Javascript
老生常谈js-react组件生命周期
2017/05/02 Javascript
vue2 自定义动态组件所遇到的问题
2017/06/08 Javascript
JS实现简单表格排序操作示例
2017/10/07 Javascript
Vue源码学习之初始化模块init.js解析
2017/11/02 Javascript
react-router4 配合webpack require.ensure 实现异步加载的示例
2018/01/18 Javascript
jQuery常见的遍历DOM操作详解
2018/09/05 jQuery
[01:03:37]Secret vs VGJ.S Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
利用python发送和接收邮件
2016/09/27 Python
Python编程实现输入某年某月某日计算出这一天是该年第几天的方法
2017/04/18 Python
python编程嵌套函数实例代码
2018/02/11 Python
Sanic框架基于类的视图用法示例
2018/07/18 Python
django实现用户注册实例讲解
2019/10/30 Python
Pandas数据离散化原理及实例解析
2019/11/16 Python
Django后台管理系统的图文使用教学
2020/01/20 Python
美国著名首饰网站:BaubleBar
2016/08/29 全球购物
社区母亲节活动方案
2014/03/05 职场文书
消防安全宣传标语
2014/06/07 职场文书
校园文化标语
2014/06/18 职场文书
销售员岗位职责
2015/02/10 职场文书
运动会通讯稿50字
2015/07/20 职场文书
副校长2015年教育教学工作总结
2015/07/27 职场文书
JavaScript控制台的更多功能
2021/04/28 Javascript