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

image.png

        
            
                
                    
                        
                    
                    
                        {{item.name}}
                        {{item.label}}
                        ¥ {{item.price}}
                        
                            -
                            
                            +
                        
                    
                
                
                  删除
                
            
        
    

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