微信小程序滑动删除效果
来源:互联网 发布:最近好看的网络自制剧 编辑:程序博客网 时间:2024/05/02 09:03
转自:看源社区 http://www.see-source.com/weixinwidget/detail.html?wid=80
最初打算使用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) }})
0 0
- 微信小程序滑动删除效果
- 微信小程序滑动删除效果
- 微信小程序滑动删除效果
- ListView 滑动删除效果
- 程序滑动效果应用
- 微信小程序 车轮之 滑动删除
- 微信小程序 向左滑动删除功能
- Android ListView 滑动删除效果
- 模仿QQ滑动删除效果
- Android 滑动删除效果实现
- android实现滑动删除效果
- ListView滑动删除效果实现
- 微信小程序-左滑删除效果
- UITABLEVIEWr实现滑动删除的效果
- 高仿微信对话列表滑动删除效果
- 高仿微信对话列表滑动删除效果
- Android 仿微信对话列表滑动删除效果
- 高仿微信对话列表滑动删除效果
- 关于XSS(跨站脚本攻击)和CSRF(跨站请求伪造)
- lua local 变量和表
- 亚人中的flat(flood)现象
- 02 CUBC-资产组-账户模块-账务基础操作服务
- 使用命令行+代理更新Android SDK---国内的Android代理镜像服务器
- 微信小程序滑动删除效果
- Bochs运行bootsect步骤
- mount: 10.8.248.147:/xilinx/zed_common failed, reason given by server: Permission denied
- Java String.split()用法小结
- lua require与module
- 03 CUBC-资产组-资产模块-资产操作服务
- AndroidStudio下获取sha1的两种办法
- 安卓圆形imageview笔记
- Sizeof与Strlen的区别与联系(转)