具体情况是这样的：
一个收货地址列表，列表里的每项是一个组件(就是列表渲染的是组件)，组件里面的删除操作是滑屏后显示删除按钮后，再点击删除才能删除(就是删除按钮一开始在可视范围外，具体看交互看图片)。


现在，我对中间的地址项进行删除操作(这时候这个子项添加了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);