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


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 相关文章推荐
JavaScript 创建对象
Jul 17 Javascript
bgsound 背景音乐 的一些常用方法及特殊用法小结
May 11 Javascript
js截取中英文字符串、标点符号无乱码示例解读
Apr 17 Javascript
jQuery实现隔行背景色变色
Nov 24 Javascript
JavaScript中iframe实现局部刷新的几种方法汇总
Jan 06 Javascript
JS中setTimeout和setInterval的最大延时值详解
Feb 13 Javascript
Angular中$state.go页面跳转并传递参数的方法
May 09 Javascript
基于jquery实现左右上下移动效果
May 02 jQuery
vue异步加载高德地图的实现
Jun 19 Javascript
Vue2.0+Vux搭建一个完整的移动webApp项目的示例
Mar 19 Javascript
js打开word文档预览操作示例【不是下载】
May 23 Javascript
ES6新增的数组知识实例小结
May 23 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
dedecms中常见问题修改方法总结
2007/03/21 PHP
php获取mysql版本的几种方法小结
2008/03/25 PHP
PHP7之Mongodb API使用详解
2015/12/26 PHP
CI(CodeIgniter)框架视图中加载视图的方法
2017/03/24 PHP
基于Laravel-admin 后台的自定义页面用法详解
2019/09/30 PHP
JavaScript的单例模式 (singleton in Javascript)
2010/06/11 Javascript
Bootstrap Fileinput文件上传组件用法详解
2016/05/10 Javascript
基于jQuery的ajax方法封装
2016/07/14 Javascript
bootstrap daterangepicker双日历时间段选择控件详解
2017/06/15 Javascript
node 命令方式启动修改端口的方法
2018/05/12 Javascript
微信小程序签到功能
2018/10/31 Javascript
layui插件表单验证提交触发提交的例子
2019/09/09 Javascript
JavaScript实现随机点名程序
2020/03/25 Javascript
记一次react前端项目打包优化的方法
2020/03/30 Javascript
vue使用微信扫一扫功能的实现代码
2020/04/11 Javascript
JavaScript实现弹出窗口效果
2020/12/09 Javascript
[04:10]DOTA2英雄梦之声_第11期_圣堂刺客
2014/06/21 DOTA
[51:39]DOTA2-DPC中国联赛 正赛 Magma vs LBZS BO3 第二场 2月7日
2021/03/11 DOTA
仅用50行代码实现一个Python编写的计算器的教程
2015/04/17 Python
python中的代码编码格式转换问题
2015/06/10 Python
Python实现的插入排序算法原理与用法实例分析
2017/11/22 Python
Python基础学习之时间转换函数用法详解
2019/06/18 Python
python笔记_将循环内容在一行输出的方法
2019/08/08 Python
Python实现使用dir获取类的方法列表
2019/12/24 Python
TensorFlow2.1.0安装过程中setuptools、wrapt等相关错误指南
2020/04/08 Python
matplotlib 对坐标的控制,加图例注释的操作
2020/04/17 Python
CSS3 2D模拟实现摩天轮旋转效果
2016/11/16 HTML / CSS
Bonami斯洛伐克:购买家具和家居饰品
2019/07/02 全球购物
英国领先的在线鱼贩:The Fish Society
2020/08/12 全球购物
英语演讲稿范文
2014/01/03 职场文书
二手书店创业计划书
2014/01/16 职场文书
婚前财产公证书
2014/04/10 职场文书
说好普通话圆梦你我他演讲稿
2014/09/21 职场文书
2015年八一建军节演讲稿
2015/03/19 职场文书
2015年工会工作总结范文
2015/07/23 职场文书
Python 内置函数速查表一览
2021/06/02 Python