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

　　微信小程序滑动删除效果，微信小程序滑动删除实现代码。微信小程序发展迅速，许多玩微信小程序的朋友都在问微信小程序滑动删除效果怎么实现?下面小编和大家分享一下微信小程序滑动删除实现代码，希望可以帮助到大家。

　　item的布局：

　　推荐小程序优先使用flex布局，完全够用。这也是微信推荐的。

　　主要是将删除按钮的设为绝对定位(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":".see-source", "right":0, "startRight":0},{"id":"bbbb", "name":"小程序教程", "url":".see-source", "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)

　　}

　　})

　　温馨提醒

　　因为小程序中目前没有像Android中快速滑动事件，所以，要实现惯*滑动暂时是不可能的。

　　以上就是小编整理的微信小程序滑动删除效果和微信小程序滑动删除实现代码的全部内容，希望对大家有所帮助,更多小程序码、小程序资讯请关注微小乔网站。

　　相关推荐：

　　关于摩拜单车小程序，摩拜单车小程序是什么?

　　微信小程序能做游戏吗?微信小程序有些什么游戏?

  微信小程序应用号有哪些?微信小程序值得推荐的小程序应用号