微信小程序实用组件：侧滑删除项目（真机可用）

发布：2018-04-11 10:38浏览：次来源：网络作者：cola

做一个侧滑的动画，如果相同需求，可以看下。
本人的数据为瞎编乱造的，加上动画以及删除处理再渲染之后，会有bug，源码中有注释。
不过已经避开了bug。如有大神知道原因，敬请指导，谢谢微信小程序实用组件：侧滑删除项目（真机可用）(图1)

预览图片：
搜索示意：
检索名称

删除示意：

代码示例：

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[i]);
if (tempLetterObj[py]) {
tempLetterObj[py].push(nameData[i]);
} else {
tempLetterObj[py] = [nameData[i]];
}
}
for (var i = 0, l = letter.length; i < l; i++) {
tempLetterArray[i] = {
xing: letter[i],
items: tempLetterObj[letter[i]]
}
}
that.data.tempFriendList = tempLetterArray;
// 用作保存原始的好友列表，避免搜索后导致好友列表无法复原
that.setData({
friendList: tempLetterArray
})
}
// 搜索与关键字相关的用户并显示
initData.matchInput = function (res) {
var that = this;
var str = res.detail.value;
var list = that

上一篇：三步瘦身，做名副其实的「小程序」

下一篇：常用效果分享：swiper制作tab切换

免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。

微信小程序实用组件：侧滑 删除项目（真机可用）

微信小程序实用组件：侧滑删除项目（真机可用）