微信小程序实用demo：侧滑 删除项目（真机可用）
做一个侧滑的动画，如果相同需求，可以看下。本人的数据为瞎编乱造的，加上动画以及删除处理再渲染之后，会有bug，源码中有注释。
不过已经避开了bug。如有大神知道原因，敬请指导，谢谢undefined
预览图片：
搜索示意：
删除示意：
var util = require('../../utils/util.js');
var nameUtil = require("../../data/pinyin/getFirstLetter.js");
var friendList = [];
var initData = {};
var nameData = ["王霞", "丁卯", '布鲁克斯', "艾伦", "考特", "奥巴马", "古斯丁", "TCL", "Nathan", "OBJ", "杰弗森", "詹姆斯", "罗纳尔多", "陈伟", "西域男孩", "旷古奇迹", "飞天", "小耗子", "光棍", "阿拉克服", "荷兰", "iPhone", "订购", "PM", "SW", "OBJs", "特兰李", "田中不正", "钟落", "璀璨", "奥古斯汀库茨", "定海神针", "光大WE谷", "大老鼠"];
initData.data = {
newFrinedAmount: 1,
inputVal: '',
tempFriendList: [],
touchX: 0,
touchY: 0,
tempName: '',
AnimatingName: '',
deleteAnimation: '' // 控制是否给相应的单元增加删除动画
};
initData.onShow = function (team1) {
this.animation = wx.createAnimation({
duration: 300,
timingFunction: 'ease',
})
}
initData.onLoad = function () {
var that = this;
var funName = nameUtil.getInitials.translateCode;
var letter = nameUtil.letters;
var tempLetterArray = [];
var tempLetterObj = {};
for (var i = 0, l = nameData.length; i < l; i++) {
var py = funName(nameData);
if (tempLetterObj) {
tempLetterObj.push(nameData);
} else {
tempLetterObj = ];
}
}
for (var i = 0, l = letter.length; i < l; i++) {
tempLetterArray = {
xing: letter,
items: tempLetterObj]
}
}
that.data.tempFriendList = tempLetterArray;
// 用作保存原始的好友列表，避免搜索后导致好友列表无法复原
that.setData({
friendList: tempLetterArray
})
}
// 搜索与关键字相关的用户并显示
initData.matchInput = function (res) {
var that = this;
var str = res.detail.value;
var list = that.data.tempFriendList; // 注意使用这个，因为that.data.friendList这个数据一直是动态的。
var reg = new RegExp(str.toLowerCase());
var arrList = [];
if (str) {
for (var i = 0, l = list.length; i < l; i++) {
var items = list.items;
if (!items) continue;
var arrItem = {
items: [],
xing: ''
};
for (var j = 0, len = items.length; j < len; j++) {
if (reg.test(items.toLowerCase())) {
arrItem.items.push(items)
}
}
if (arrItem.items.length) {
arrItem.xing = list.xing;
arrList.push(arrItem)
}
}
} else {
arrList = that.data.tempFriendList;
}
that.setData({
friendList: arrList
})
}
// 触摸开始事件
initData.moveStart = function (e) {
this.data.touchX = e.changedTouches.clientX;
this.data.touchY = e.changedTouches.clientY;
}
// 触摸结束事件
// 动画的执行逻辑
initData.moveEnd = function (e) {
var X = e.changedTouches.clientX;
var Y = e.changedTouches.clientY;
var name = e.currentTarget.dataset.name;
var data = null, tempAniamtion = null;
// console.log('左滑动');
if (this.data.touchX - X > 3 && Math.abs(this.data.touchY - Y) < 20) {
if (this.data.AnimatingName) {
tempAniamtion = this.animation.left('0rpx').step();
this.data.AnimatingName = '';
this.setData({
AnimatingName: '',
deleteAnimation: tempAniamtion.export()
})
} else {
tempAniamtion = this.animation.left('-160rpx').step();
this.setData({
AnimatingName: name,
deleteAnimation: tempAniamtion.export(),
tempName: name
})
}
} else if (this.data.touchX - X < -3 && Math.abs(this.data.touchY - Y) < 20) {
// console.log('右滑动');
tempAniamtion = this.animation.left('0rpx').step();
this.setData({
deleteAnimation: tempAniamtion.export(),
AnimatingName: ''
});
}
}
// 删除好友
initData.removeFriend = function (e) {
var idxall = e.currentTarget.dataset.idxall;
var idx = e.currentTarget.dataset.idx;
var datas = this.data.friendList;
var arrList = [];
// 如果没有这之间的代码，会有bug
var tempAniamtion = this.animation.left('0rpx').step({duration: 1});
this.data.AnimatingName = '';
this.setData({
AnimatingName: '',
deleteAnimation: tempAniamtion.export()
})
// 如果没有这之间的代码，会有bug
datas.items.splice(idx, 1);
arrList = initData.dealFriends(datas);
this.setData({
friendList: arrList,
tempFriendList: arrList,
tempName: ''
})
}
// 对好友列表进行清理
initData.dealFriends = function (datas) {
var arr = [], i = 0, len = datas.length;
for (; i < len; i++) {
if (datas.items && datas.items.length) {
arr.push(datas);
}
}
return arr;
}
Page(initData)
补充一个问题：
大家如果试用的话要将friends.wxml里面所有的wx:key，全部赋值为空，即更改为 wx:key=""
解释：
这是小程序视图层渲染的机制吧，我最开始设定wx:key的值是name，就是说如果name没有改变的话，视图层的相关组件上的数据都不会改变，这会导致idx和idxall在删除后未及时更新，而出现删除紊乱的问题。（粗糙理解，欢迎批评纠正！）
抱歉！
**** Hidden Message *****
我有流量，你有产品，我们就可以合作，有意的个人开发者朋友可以联系微,信,号j i m 2 0 1 8 0 6 8 8，详聊
页:
[1]