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


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 相关文章推荐
pjblog修改技巧汇总
Mar 12 Javascript
javascript div 遮罩层封锁整个页面
Jul 10 Javascript
通过js动态操作table(新增,删除相关列信息)
May 23 Javascript
jQuery判断div随滚动条滚动到一定位置后停止
Apr 02 Javascript
jQuery实现左右切换焦点图
Apr 03 Javascript
javascript单例模式的简单实现方法
Jul 25 Javascript
详解JavaScript的另类写法
Apr 11 Javascript
jQuery实现输入框邮箱内容自动补全与上下翻动显示效果【附demo源码下载】
Sep 20 Javascript
微信小程序 POST请求(网络请求)详解及实例代码
Nov 16 Javascript
js读取json文件片段中的数据实例
Mar 09 Javascript
VUE Error: getaddrinfo ENOTFOUND localhost
May 03 Javascript
vue引入微信sdk 实现分享朋友圈获取地理位置功能
Jul 04 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 常用字符串函数总结
2008/03/15 PHP
PHP 遍历文件实现代码
2011/05/04 PHP
基于PHP+Ajax实现表单验证的详解
2013/06/25 PHP
jquery处理json对象
2014/11/03 Javascript
利用JS生成博文目录及CSS定制博客
2016/02/10 Javascript
JS模拟实现方法重载示例
2016/08/03 Javascript
JS实现图片剪裁并预览效果
2016/08/12 Javascript
老生常谈JavaScript 正则表达式语法
2016/08/20 Javascript
jQuery EasyUI常用数据验证汇总
2016/09/18 Javascript
详解打造 Vue.js 可复用组件
2017/03/24 Javascript
layui前段框架日期控件使用方法详解
2017/05/19 Javascript
js使用generator函数同步执行ajax任务
2017/09/05 Javascript
vue页面跳转后返回原页面初始位置方法
2018/02/11 Javascript
微信小程序开发问题之wx.previewImage
2018/12/25 Javascript
JS使用new操作符创建对象的方法分析
2019/05/30 Javascript
layui添加动态菜单与选项卡 AJAX请求的例子
2019/09/25 Javascript
Vue监听滚动实现锚点定位(双向)示例
2019/11/13 Javascript
基于javascript处理二进制图片流过程详解
2020/06/08 Javascript
Vue Router中应用中间件的方法
2020/08/06 Javascript
python封装对象实现时间效果
2020/04/23 Python
利用Python画ROC曲线和AUC值计算
2016/09/19 Python
python如何通过实例方法名字调用方法
2018/03/21 Python
Python 创建新文件时避免覆盖已有的同名文件的解决方法
2018/11/16 Python
详解Numpy数组转置的三种方法T、transpose、swapaxes
2019/05/27 Python
解决django 新增加用户信息出现错误的问题
2019/07/28 Python
Python批量删除mysql中千万级大量数据的脚本分享
2020/12/03 Python
使用python操作lmdb对数据读取的实例
2020/12/11 Python
全球采购的街头服饰和帽子:Urban Excess
2020/10/28 全球购物
2013年高中生自我评价
2013/10/23 职场文书
学生励志演讲稿
2014/01/06 职场文书
便利店的创业计划书
2014/01/15 职场文书
人力资源管理系自荐信
2014/05/31 职场文书
大足石刻导游词
2015/02/02 职场文书
2015年全民国防教育日活动总结
2015/03/23 职场文书
goland 设置project gopath的操作
2021/05/06 Golang
Python中的pprint模块
2021/11/27 Python