最初打算使用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实现Excel导入导出方法过程详解
微信小程序完美解决scroll-view高度自适应问题的方法
bootstrap-closable-tab可实现关闭的tab标签页插件
网友评论