image.png
<view class="goodsList">
<view class="a-gooods" wx:for="{{list}}" wx:key="{{index}}" >
<view class="a-goods-conts {{item.active? 'active':''}}" bindtap="selectTap" bindtouchstart="touchS" bindtouchmove="touchM" bindtouchend="touchE" data-index="{{index}}" style="{{item.left}}">
<view class="goods-info">
<view class="img-box">
<image src="{{item.pic}}" class="img"/>
</view>
<view class="text-box">
<view class="goods-title">{{item.name}}</view>
<view class="goods-label">{{item.label}}</view>
<view class="goods-price">¥ {{item.price}}</view>
<view class="buy-num">
<view class="jian-btn {{item.number==1? 'disabled' : ''}}" catchtap="jianBtnTap" data-index="{{index}}">-</view>
<input type="number" value="{{item.number}}" disabled/>
<view class="jia-btn {{item.number==10? 'disabled' : ''}}" catchtap="jiaBtnTap" data-index="{{index}}">+</view>
</view>
</view>
</view>
<view class="delete-btn" data-index="{{index}}" catchtap="delItem">
删除
</view>
</view>
</view>
</view>
通过bindtouchstart和bindtouchend事件，判断按钮的显示和隐藏，按钮的显示和隐藏通过父块元素的margin-left来实现。
touchS:function(e){
if(e.touches.length==1){
this.setData({
startX:e.touches[0].clientX
});
}
},
touchE:function(e){
var index = e.currentTarget.dataset.index;
if(e.changedTouches.length==1){
var endX = e.changedTouches[0].clientX;
var disX = this.data.startX - endX;
var delBtnWidth = this.data.delBtnWidth;
//如果距离小于删除按钮的1/2，不显示删除按钮
var left = disX > delBtnWidth/2 ? "margin-left:-"+delBtnWidth+"px":"margin-left:0px";
// var left = disX > delBtnWidth/2 ? "margin-left:-"+120+"rpx":"margin-left:0px";
//这里的margin-left不能给rpx单位，在不同手机尺寸下，存在这很大误差，个人觉得应该归于小程序设计出现的rpx计算问题，所以需要通过下面的方法(获取元素自适应后的实际宽度)来获取绝对px值。
var list = this.data.goodsList.list;
if(index!=="" && index != null){
list[parseInt(index)].left = left;
this.setGoodsList(this.getSaveHide(),this.totalPrice(),this.allSelect(),this.noSelect(),list);
}
}
},
获取元素自适应后的实际宽度：
// var left = disX > delBtnWidth/2 ? "margin-left:-"+120+"rpx":"margin-left:0px";
这里的margin-left不能给rpx单位，在不同手机尺寸下，存在这很大误差，个人觉得应该归于小程序设计出现的rpx计算问题，所以需要通过下面的方法(获取元素自适应后的实际宽度)来获取绝对px值。
//获取元素自适应后的实际宽度
getEleWidth:function(w){
var real = 0;
try {
var res = wx.getSystemInfoSync().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
});
},
onLoad: function () {
this.initEleWidth();
this.onShow();
},
