微信小程序实现滑动删除效果


Posted in Javascript onMay 19, 2017

最初打算使用scroll-view实现,效果好、流畅、有惯性滑动,但由于滚动条没法去掉、无法实现上下层的帧布局,最终放弃了。

还是自己写个吧,利用手势事件。遗憾的是小程序中目前没有像Android中快速滑动事件,所以,要实现惯性滑动是不可能了。

微信小程序实现滑动删除效果

item的布局:

推荐小程序优先使用flex布局,完全够用。这也是微信推荐的。

<view wx:for="{{cardTeams}}" wx:for-item="cardTeam" id="{{cardTeam.id}}" class="item" bindtouchstart="drawStart" bindtouchmove="drawMove" bindtouchend="drawEnd" style="right:{{cardTeam.right}}px"> 
    <image class="img" src="http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg" mode="scaleToFill"></image> 
    <view class="number-wrapper"> 
     <text class="name">{{cardTeam.name}}</text> 
     <view class="count-wrapper"> 
      <view class="decrease-btn">-</view> 
      <text class="count">1</text> 
      <view class="increase-btn">+</view> 
     </view> 
     <view class="price-wrapper"> 
      <text class="unit">¥</text> 
      <text class="price">99.80</text> 
     </view> 
    </view> 
    <view class="ok"><view class="inner-ok">确定</view></view> 
    <view class="remove" data-id="{{cardTeam.id}}" bindtap="delItem"><view>删除</view></view> 
   </view>

主要是将删除按钮的设为绝对定位(position: absolute):

.item .remove{ 
  width: 60px; 
  height: 100%; 
  background-color: red; 
  position: absolute; 
  top: 0; 
  right: -60px; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
}
Page({ 
 data: { 
  cardTeams:[{"id":"aaaaa", "name":"android教程", "url":"http://www.see-source.com", "right":0, "startRight":0},{"id":"bbbb", "name":"小程序教程", "url":"http://www.see-source.com", "right":0, "startRight":0}] 
 }, 
 drawStart : function(e){ 
   // console.log("drawStart"); 
  var touch = e.touches[0]; 
  startX = touch.clientX; 
  startY = touch.clientY; 
  var cardTeams = this.data.cardTeams; 
  for(var i in cardTeams){ 
    var data = cardTeams[i]; 
    data.startRight = data.right; 
  } 
  key = true; 
 }, 
 drawEnd : function(e){ 
  console.log("drawEnd"); 
  var cardTeams = this.data.cardTeams; 
  for(var i in cardTeams){ 
    var data = cardTeams[i]; 
    if(data.right <= 100/2){ 
      data.right = 0; 
    }else{ 
      data.right = maxRight; 
    } 
  } 
  this.setData({ 
    cardTeams:cardTeams 
  }); 
 }, 
 drawMove : function(e){ 
   //console.log("drawMove"); 
  var self = this; 
  var dataId = e.currentTarget.id; 
  var cardTeams = this.data.cardTeams; 
  if(key){ 
    var touch = e.touches[0]; 
    endX = touch.clientX; 
    endY = touch.clientY; 
    console.log("startX="+startX+" endX="+endX ); 
    if(endX - startX == 0) 
      return ; 
    var res = cardTeams; 
      //从右往左 
 
      if((endX - startX) < 0){ 
        for(var k in res){ 
          var data = res[k]; 
          if(res[k].id == dataId){ 
            var startRight = res[k].startRight; 
            var change = startX - endX; 
            startRight += change; 
            if(startRight > maxRight) 
              startRight = maxRight; 
            res[k].right = startRight; 
          } 
        } 
      }else{//从左往右 
        for(var k in res){ 
          var data = res[k]; 
          if(res[k].id == dataId){ 
            var startRight = res[k].startRight; 
            var change = endX - startX; 
            startRight -= change; 
            if(startRight < 0) 
              startRight = 0; 
            res[k].right = startRight ; 
          } 
        } 
      } 
      self.setData({ 
        cardTeams:cardTeams 
      }); 
           
  } 
 }, 
 //删除item 
 delItem: function(e){ 
  var dataId = e.target.dataset.id; 
  console.log("删除"+dataId); 
  var cardTeams = this.data.cardTeams; 
  var newCardTeams = [];  
  for(var i in cardTeams){ 
    var item = cardTeams[i]; 
    if(item.id != dataId){ 
     newCardTeams.push(item); 
    } 
  } 
  this.setData({ 
    cardTeams:newCardTeams 
   }); 
 }, 
 onLoad: function () { 
  console.log('onLoad:'+app.globalData.domain) 
   
 } 
})

drawStart用于记录手指触碰时的位置,drawMove记录手指滑动的位置,两者的差值就是删除按钮的偏移量
drawEnd手指抬起时触发,用于设置弹回、摊开效果。目前我的是超过一半自动弹开,不足一半自动收回。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
struts2+jquery+json实现异步加载数据(自写)
Jun 24 Javascript
js调用webservice构造SOAP进行身份验证
Apr 27 Javascript
angularjs封装bootstrap时间插件datetimepicker
Jun 20 Javascript
js模糊查询实例分享
Dec 26 Javascript
js实现截图保存图片功能的代码示例
Feb 16 Javascript
js获取浏览器的各种属性
Apr 27 Javascript
ionic选择多张图片上传的示例代码
Oct 10 Javascript
vue select二级联动第二级默认选中第一个option值的实例
Jan 10 Javascript
vue.js 底部导航栏 一级路由显示 子路由不显示的解决方法
Mar 09 Javascript
JavaScript 点击触发复制功能实例详解
Nov 02 Javascript
vue-router命名视图的使用讲解
Jan 19 Javascript
深入理解JavaScript 箭头函数
May 30 Javascript
微信小程序图片横向左右滑动案例
May 19 #Javascript
layui导航栏实现代码
May 19 #Javascript
详解AngularJS controller调用factory
May 19 #Javascript
layer弹窗插件操作方法详解
May 19 #Javascript
layui选项卡效果实现代码
May 19 #Javascript
bootstrap table单元格新增行并编辑
May 19 #Javascript
layui弹出层效果实现代码
May 19 #Javascript
You might like
如何写php程序?
2006/12/08 PHP
浅析PHP递归函数返回值使用方法
2013/02/18 PHP
PHP实现把MySQL数据库导出为.sql文件实例(仿PHPMyadmin导出功能)
2014/05/10 PHP
PHP、Nginx、Apache中禁止网页被iframe引用的方法
2020/10/01 PHP
PHP实现上传文件并存进数据库的方法
2015/07/16 PHP
深入理解PHP JSON数组与对象
2016/07/19 PHP
php通过各种函数判断0和空
2020/07/04 PHP
JavaScript 实现??打印?理
2007/04/28 Javascript
JQuery中html()方法使用不当带来的陷阱
2011/04/07 Javascript
图片上传插件jquery.uploadify详解
2013/11/15 Javascript
jquery遍历筛选数组的几种方法和遍历解析json对象
2013/12/13 Javascript
jquery实现的网页自动播放声音
2014/04/30 Javascript
js 操作符汇总
2014/11/08 Javascript
js字符串完全替换函数分享
2014/12/03 Javascript
JavaScript设计模式之装饰者模式介绍
2014/12/28 Javascript
JS实现动态表格的添加,修改,删除功能(推荐)
2016/06/15 Javascript
浅谈jquery高级方法描述与应用
2016/10/04 Javascript
jQuery与js实现颜色渐变的方法
2016/12/30 Javascript
axios的拦截请求与响应方法
2018/08/11 Javascript
js中Array对象的常用遍历方法详解
2019/01/17 Javascript
微信小程序实现简单文字跑马灯
2020/05/26 Javascript
在Python的Django框架中用流响应生成CSV文件的教程
2015/05/02 Python
Python实现身份证号码解析
2015/09/01 Python
python实现实时监控文件的方法
2016/08/26 Python
python实现斐波那契数列的方法示例
2017/01/12 Python
Python3.x对JSON的一些操作示例
2017/09/01 Python
python3 json数据格式的转换(dumps/loads的使用、dict to str/str to dict、json字符串/字典的相互转换)
2019/04/01 Python
python编写计算器功能
2019/10/25 Python
Python SMTP发送电子邮件的示例
2020/09/23 Python
char型变量中能不能存贮一个中文汉字
2015/07/08 面试题
会计系个人求职信范文分享
2013/12/20 职场文书
税务会计岗位职责
2014/02/18 职场文书
班级寄语大全
2014/04/10 职场文书
2015年人力资源工作总结
2015/04/08 职场文书
优秀范文:《但愿人长久》教学反思3篇
2019/10/24 职场文书
Nginx解决403 forbidden的完整步骤
2021/04/01 Servers