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


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 相关文章推荐
js 获取、清空input type=&quot;file&quot;的值(示例代码)
Dec 24 Javascript
js脚本获取webform服务器控件的方法
May 16 Javascript
百度地图API之本地搜索与范围搜索
Jul 30 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件体系结构
Nov 19 Javascript
bootstrap table分页模板和获取表中的ID方法
Jan 10 Javascript
原生js实现放大镜特效
Mar 08 Javascript
基于jQuery实现一个marquee无缝滚动的插件
Mar 09 Javascript
BootStrap+Mybatis框架下实现表单提交数据重复验证
Mar 23 Javascript
Net微信网页开发 使用微信JS-SDK获取当前地理位置过程详解
Aug 26 Javascript
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
Oct 10 jQuery
微信小程序获取当前时间及星期几的实例代码
Sep 20 Javascript
vue封装自定义指令之动态显示title操作(溢出显示,不溢出不显示)
Nov 12 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
Yii框架组件和事件行为管理详解
2016/05/20 PHP
thinkphp5框架调用其它控制器方法 实现自定义跳转界面功能示例
2019/07/03 PHP
TP3.2.3框架文件上传操作实例详解
2020/01/23 PHP
判断iframe是否加载完成的完美方法
2010/01/07 Javascript
js中escape对应的C#解码函数 UrlDecode
2012/12/16 Javascript
用jQuery toggleClass 实现鼠标移上变色
2014/05/14 Javascript
如何利用AngularJS打造一款简单Web应用
2015/12/05 Javascript
Angular ng-repeat 对象和数组遍历实例
2016/09/14 Javascript
JS中split()用法(将字符串按指定符号分割成数组)
2016/10/24 Javascript
jQuery实现的仿百度,仿谷歌搜索下拉框效果示例
2016/12/30 Javascript
Bootstrap列表组学习使用
2017/02/09 Javascript
vue + socket.io实现一个简易聊天室示例代码
2017/03/06 Javascript
jquery dataTable 后台加载数据并分页实例代码
2017/06/07 jQuery
vue中动态设置meta标签和title标签的方法
2018/07/11 Javascript
vue 返回上一页,页面样式错乱的解决
2019/11/14 Javascript
javascript实现弹出层效果
2019/12/10 Javascript
node.js中npm包管理工具用法分析
2020/02/14 Javascript
Vue快速实现通用表单验证的方法
2020/02/24 Javascript
[01:10]DOTA2次级职业联赛 - U5战队宣传片
2014/12/01 DOTA
[03:42]2018完美盛典-《加冕》
2018/12/16 DOTA
python遍历数组的方法小结
2015/04/30 Python
Python的语言类型(详解)
2017/06/24 Python
python分析作业提交情况
2017/11/22 Python
python决策树之C4.5算法详解
2017/12/20 Python
深入浅析Python获取对象信息的函数type()、isinstance()、dir()
2018/09/17 Python
Python 中 function(#) (X)格式 和 (#)在Python3.*中的注意事项
2018/11/30 Python
python在新的图片窗口显示图片(图像)的方法
2019/07/11 Python
Marriott中国:万豪国际酒店查询预订
2016/09/02 全球购物
办公室驾驶员岗位职责
2013/11/15 职场文书
技能比赛获奖感言
2014/02/14 职场文书
2014年保安个人工作总结
2014/11/13 职场文书
导游词开场白
2015/01/31 职场文书
2015年综治维稳工作总结
2015/04/07 职场文书
高中班主任心得体会
2016/01/07 职场文书
MySQL 用 limit 为什么会影响性能
2021/09/15 MySQL
Go语言怎么使用变长参数函数
2022/07/15 Golang