<View style={{display: 'flex'}}>
<View
className={goodsSpu?.isTouchMove? Styles.item_spu_moveLeft : Styles.item_spu_layout}
onTouchStart={this.touchStart}
onTouchEnd={this.touchEnd}
>
<Checkbox />
<Image src={mainPicUrl ? `${mainPicUrl}@80h_80w_1e_1c` : defaultColorImg}/>
</View>
<View onClick={()=>this.deleteSkuSolo()}>删除</View>
</View>
touchStart = (e) => {
this.setState({
touchStartX: e.changedTouches[0].clientX,
touchStartIndex: e.currentTarget.dataset.index.brandSpuId,
})
}
touchEnd = (e) => {
// 在每次滑动后先取消所有spu和sku的isTouchMove判断值,默认为未移动
this.store.datas.forEach((v) => {
v.isTouchMove = false;
v.skuList.forEach((x)=> {
x.isTouchSkuMove = false
})
});
var endIndex = e.currentTarget.dataset.index.brandSpuId;
if (this.state.touchStartIndex != endIndex) {
return
}
var touchStartX = this.state.touchStartX;
var touchEndX = e.changedTouches[0].clientX;
if (touchEndX - touchStartX >= -80) {
return
} else {
this.store.datas.map((item)=> {
// 锁定手指移动的项,将isTouchMove=true写入循环的列表里面
if (item.brandSpuId == endIndex) {
item.isTouchMove = true
}
})
}
}
deleteSkuSolo = () => {
// 删除的函数
}
.item_spu_moveLeft {
width: 100%;
height: 142px;
display: flex;
flex-direction: row;
padding: 24px;
position: relative;
background-color: white;
margin-left: -142px;
transition: all 0.3s;
transform: translateX(0);
}
.item_spu_layout {
width: 100%;
height: 142px;
display: flex;
flex-direction: row;
padding: 24px;
position: relative;
background-color: white;
margin-left: -142px;
transition: all 0.3s;
transform: translateX(142px);
}