微信小程序实现滑动删除效果
最初打算使用scroll-view实现，效果好、流畅、有惯性滑动，但由于滚动条没法去掉、无法实现上下层的帧布局，最终放弃了。
创新互联公司成立于2013年，是专业互联网技术服务公司，拥有项目成都网站建设、网站设计网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元砚山做网站,已为上家服务,为砚山各地企业和个人服务,联系电话:13518219792
还是自己写个吧，利用手势事件。遗憾的是小程序中目前没有像Android中快速滑动事件，所以，要实现惯性滑动是不可能了。
item的布局：
推荐小程序优先使用flex布局，完全够用。这也是微信推荐的。
{{cardTeam.name}} - 1 + ¥ 99.80 确定 删除
主要是将删除按钮的设为绝对定位(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手指抬起时触发，用于设置弹回、摊开效果。目前我的是超过一半自动弹开，不足一半自动收回。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持创新互联。
当前文章：微信小程序实现滑动删除效果
当前URL：http://ybzwz.com/article/gehphj.html
