具体情况是这样的：
一个收货地址列表，列表里的每项是一个组件(就是列表渲染的是组件)，组件里面的删除操作是滑屏后显示删除按钮后，再点击删除才能删除(就是删除按钮一开始在可视范围外，具体看交互看图片)。
现在，我对中间的地址项进行删除操作(这时候这个子项添加了css的transform: translate(-120rpx, 0)来显示删除按钮)。这时候点击删除功能是正常，但下一个组件竟然继承了这个子项的css偏移量(就是下一个组件的删除按钮竟然直接显示而不需要滑动了)。
删除实现方式：
组件点击删除后，通过that.triggerEvent(“delAddress”, {id: id});交给父级操作ListData数据去删除这个组件的数据(删除功能是正常的，但css会被继承)。
已测试操作：
对wx:key进行了增加和删除测试，但问题还是存在。
具体图片：
具体的组件的代码：
// component/footer/footer.js
var app = getApp();
// var state = { //怕用户一直双击或者ajax速度慢等问题，防止双击，目前代码已经注释，但还是有这个问题
// sw: {
// delAjaxIng: false
// }
// };
Component({
/**
* 组件的属性列表
*/
properties: {
itemData: {
type: Object,
value: {
id: 10,
consignee: “李四”,
region_id: 0,
is_default: 0,
phone: “150****123”,
street: “广东省广州市天河区天河路xxx”
}
}
},
/**
* 组件的初始数据
*/
data: {
delW: 0, //控制滑动多少实现偏移，因为rpx转设备实际像素，所以需要转换
startX: 0, //touchstart时的坐标，根据可视范围记录
moveX: 0, //touchmove时的坐标，根据可视范围记录
endX: 0, //touchend时的坐标，根据可视范围记录
transformCss: “transform: translate(0rpx, 0)”, //视图的根据这个样式进行渲染的
transitionCss: “”,
isTouchMove: false, //开发时发现，直接点击页面会跳过touchmove事件
},
ready: function () {
this.setData({
delW: Math.ceil(winInfo.windowWidth / 750 * 120 * 1.8),
});
},
/**
* 组件的方法列表
*/
methods: {
detached: function() {
console.log(“ddddddddddd”)
},
delAddress: function() {
var that = this;
// if (state.sw.delAjaxIng) {
// return false;
// }
var id = that.data.itemData.id;
var url = ‘/shipping_address/delete_shipping_address’;
//state.sw.delAjaxIng = true;
//ajax进行了封装，方便公用。默认Post方式提交
app.Lyj.fn.ajax({
url: url,
data: {
id: id
}
}).then(function (rec) {
//state.sw.delAjaxIng = false;
var fullData = rec || {};
var respData = fullData.data || {};
var data = respData.data || {};
console.log(data)
if (respData.code == 200) {
that.triggerEvent(“delAddress”, {id: id});
} else {
wx.showToast({
icon: “none”,
title: respData.message,
});
}
}, function () {
//state.sw.delAjaxIng = false;
});
},
touchStart: function (e) {
this.setData({
startX: e.touches[0].clientX,
transitionCss: “” //需要清空transition
});
//console.log(“start”, e.touches[0].clientX);
},
touchMove: function (e) {
var endX = this.data.endX;
var moveX = e.touches[0].clientX;
this.setData({
isTouchMove: true,
moveX: moveX,
transformCss: “transform: translate(” + (moveX - this.data.startX + endX) + “rpx, 0);”
});
},
touchEnd: function (e) {
//直接点击会不触发touchmove
if (!this.data.isTouchMove) {
return false;
}
var x = this.data.moveX - this.data.startX;
var endX = this.data.endX;
var absX = Math.abs(x);
var delW = this.data.delW;
//console.log(“xxxxx:” + x, “startX:” + this.data.startX, “moveX:” + this.data.moveX, “endX:” + endX, “delW:” + delW)
this.setData({
startX: 0,
transitionCss: “transition: all .4s;”
});
if (endX < 0) {
if (x < 0) {
x = endX;
this.setData({
transformCss: “transform: translate(” + x + “rpx, 0);”,
endX: x
});
}
else {
if (x >= delW) {
x = 0;
this.setData({
transformCss: “transform: translate(” + x + “rpx, 0);”,
endX: x
});
}
else {
x = -120;
this.setData({
transformCss: “transform: translate(” + x + “rpx, 0);”,
endX: x
});
}
}
}
else {
if (x >= 0) {
x = 0;
this.setData({
transformCss: “transform: translate(” + x + “rpx, 0);”,
endX: x
});
}
else {
if (absX > delW) {
x = -120;
this.setData({
transformCss: “transform: translate(” + x + “rpx, 0);”,
endX: x
});
}
else {
x = 0;
this.setData({
transformCss: “transform: translate(” + x + “rpx, 0);”,
endX: x
});
}
}
}
}
}
})
希望遇到过此问题或者知道是什么原因触发此问题的各位指教下。。。提前谢谢了~~
强力驱动