rpx单位在JS中控制中存在误差

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();
  },