rush:js;">
// pages/leftSwiperDel/index.js
Page({
data: {
delBtnWidth: 180//
删除按钮宽度单位（rpx）
},onLoad: function (options) {
//
页面初始化 options为
页面跳转所带来的参数
this.initEleWidth();
this.tempData();
},onReady: function () {
//
页面渲染完成
},onShow: function () {
//
页面显示
},onHide: function () {
//
页面隐藏
},onUnload: function () {
//
页面关闭
},touchS: function (e) {
if (e.
touches.length == 1) {
this.setData({
//设置触摸起始点水平方向位置
startX: e.
touches[0].clientX
});
}
},touchM: function (e) {
if (e.
touches.length == 1) {
//手指移动时水平方向位置
var moveX = e.
touches[0].clientX;
//手指起始点位置与移动期
间的差值
var
disX = this.data.startX - moveX;
var delBtnWidth = this.data.delBtnWidth;
var txtStyle = "";
if (
disX == 0 ||
disX < 0) {//如果移动距离小于等于0，文本层位置不变
txtStyle = "left:0px";
} else if (disX > 0) {//移动距离大于0，文本层left值等于手指移动距离
txtStyle = "left:-" +
disX + "px";
if (
disX >= delBtnWidth) {
//控制手指移动距离最大值为
删除按钮的宽度
txtStyle = "left:-" + delBtnWidth + "px";
}
}
//
获取手指触摸的是哪一项
var index = e.target.dataset.index;
var list = this.data.list;
list[index].txtStyle = txtStyle;
//更新列表的状态
this.setData({
list: list
});
}
},touchE: function (e) {
if (e.changed
touches.length == 1) {
//手指移动结束后水平位置
var endX = e.changed
touches[0].clientX;
//触摸开始与结束，手指移动的距离
var
disX = this.data.startX - endX;
var delBtnWidth = this.data.delBtnWidth;
//如果距离小于
删除按钮的1/2，
不显示删除按钮
var txtStyle =
disX > delBtnWidth / 2 ? "left:-" + delBtnWidth + "px" : "left:0px";
//
获取手指触摸的是哪一项
var index = e.target.dataset.index;
var list = this.data.list;
list[index].txtStyle = txtStyle;
//更新列表的状态
this.setData({
list: list
});
}
},//
获取元素自适应后的实际宽度
getEleWidth: function (w) {
var real = 0;
try {
var res = wx.getSy
stemInfoSync().windowWidth;
var scale = (750 / 2) / (w / 2);//以宽度750px设计稿做宽度的自适应
// console.log(scale);
real = Math.floor(res / scale);
return real;
} catch (e) {
return false;
// Do something when catch error
}
},initEleWidth: function () {
var delBtnWidth = this.getEleWidth(this.data.delBtnWidth);
this.setData({
delBtnWidth: delBtnWidth
});
},//点击
删除按钮事件
delItem: function (e) {
//
获取列表中要
删除项的下标
var index = e.target.dataset.index;
var list = this.data.list;
//移除列表中下标为index的项
list.splice(index,1);
//更新列表的状态
this.setData({
list: list
});
},//测试临时数据
tempData: function () {
var list = [
{
rank: "1",txtStyle: "",icon: "/images/my.png",name: "李飞",pace: "23456",},{
rank: "2",name: "张叶",pace: "23450",{
rank: "3",name: "王小婷",pace: "22345",{
rank: "4",name: "袁经理",pace: "21687",{
rank: "5",name: "陈雅婷",pace: "21680",{
rank: "6",name: "许安琪",pace: "20890",{
rank: "7",name: "里俊飞",pace: "20741",{
rank: "8",name: "李小俊",pace: "19511",{
rank: "9",name: "陈俊飞",pace: "19501",]
//
this.setData({
list: list
});
}
})
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
