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


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 相关文章推荐
12个非常有创意的JavaScript小游戏
Mar 18 Javascript
js实现右下角可关闭最小化div(可用于展示推荐内容)
Jun 24 Javascript
jQuery.fn和jQuery.prototype区别介绍
Oct 05 Javascript
两个数组去重的JS代码
Dec 04 Javascript
JQuery+Ajax无刷新分页的实例代码
Feb 08 Javascript
javascript中的nextSibling使用陷(da)阱(keng)
May 05 Javascript
JavaScript字符串对象slice方法入门实例(用于字符串截取)
Oct 16 Javascript
jQuery中:first-child选择器用法实例
Dec 31 Javascript
jQuery中 prop() attr()使用详解
May 19 Javascript
javascript数据结构中栈的应用之符号平衡问题
Apr 11 Javascript
在Vue中如何使用Cookie操作实例
Jul 27 Javascript
three.js中文文档学习之如何本地运行详解
Nov 20 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
从C/C++迁移到PHP——判断字符类型的函数
2006/10/09 PHP
PHP中的cookie不用刷新就生效的方法
2012/02/04 PHP
PHP图片处理之使用imagecopyresampled函数裁剪图片例子
2014/11/19 PHP
php中in_array函数用法探究
2014/11/25 PHP
PHP实现导出excel数据的类库用法示例
2016/10/15 PHP
Yii框架组件的事件机制原理与用法分析
2020/04/07 PHP
IE iframe的onload方法分析小结
2010/01/07 Javascript
Lazy Load 延迟加载图片的jQuery插件中文使用文档
2012/10/18 Javascript
js监听键盘事件示例代码
2013/07/26 Javascript
javascript Array 数组常用方法
2015/04/05 Javascript
JQuery 在文档中查找指定name的元素并移除的实现方法
2016/05/19 Javascript
Bootstrap框架的学习教程详解(二)
2016/10/18 Javascript
网站发布后Bootstrap框架引用woff字体无法正常显示的解决方法
2016/11/24 Javascript
Vue单页应用引用单独的样式文件的两种方式
2018/03/30 Javascript
使用webpack搭建vue项目实现脚手架功能
2019/03/15 Javascript
M2实现Nodejs项目自动部署的方法步骤
2019/05/05 NodeJs
JS中实现一个下载进度条及播放进度条的代码
2019/06/10 Javascript
js实现简单进度条效果
2020/03/25 Javascript
使用python删除nginx缓存文件示例(python文件操作)
2014/03/26 Python
python改变日志(logging)存放位置的示例
2014/03/27 Python
Python判断中文字符串是否相等的实例
2018/07/06 Python
解决tensorflow1.x版本加载saver.restore目录报错的问题
2018/07/26 Python
PyQt 实现使窗口中的元素跟随窗口大小的变化而变化
2019/06/18 Python
使用pytorch实现可视化中间层的结果
2019/12/30 Python
Python 实现递归法解决迷宫问题的示例代码
2020/01/12 Python
python 实现性别识别
2020/11/21 Python
PyTorch中的拷贝与就地操作详解
2020/12/09 Python
UGG澳洲官网:UGG Australia
2018/04/26 全球购物
印尼网上商店:Alfacart.com
2019/03/11 全球购物
学生发电厂实习自我鉴定
2013/09/22 职场文书
初入社会应届生求职信
2013/11/18 职场文书
合同专员岗位职责
2013/12/18 职场文书
安全检查与奖惩制度
2014/01/23 职场文书
办理房产过户的委托书
2014/09/14 职场文书
2014年安全生产工作总结
2014/11/13 职场文书
MySQL 数据库 增删查改、克隆、外键 等操作
2022/05/11 MySQL