小程序--获取容器内各元素宽度之和-坑

已知元素个数和各元素之间的距离（单位：rpx），求各元素宽度之和，以获取容器宽度并设置其宽度（单位：rpx）。

思路一：获取各元素宽度+距离（单位：rpx；因此，距离应该是rpx单位值除以2）；累加后得到总的值（单位：px）；this.setData()值=得到的总值（单位：px）* 2 - 最后一个元素的距离（单位：rpx）；

代码：

<view class="label-list">

<scroll-view scroll-x="true">

<view class="label-list-text" style="width: {{labelListWidth}}rpx;"><text wx:for='{{labelList}}' wx:key='' class="label-text-top">{{item.text}}</text></view>

</scroll-view>

</view>

let obj = wx.createSelectorQuery(), labelWidth = 0, currentPage = this;
    obj.select('.label-all-index').boundingClientRect();
    obj.exec(function (rect){
      if (rect[0].length > 0){
        for (let i in rect[0]){
          labelWidth += (rect[0][i].width + 7); //思路一
          // labelWidth += (rect[0][i].width * 2 + 14); //思路二
        }
        console.log('各元素宽度之总和===============' + labelWidth)
      }
      currentPage.setData({
        labelListWidth: labelWidth * 2 - 14
      })
    })

结果：

数据上来看，相差太大了。按理应该没有问题的，但问题就是出现了。后来，我想着应该是单位rpx和px惹的祸。我换了一种方式来计算。

思路二：获取各元素宽度（单位：px）* 2 + 距离（单位：rpx）；累加后得到总的值（单位：rpx）；this.setData()值=得到的总值（单位：rpx）* 2 - 最后一个元素的距离（单位：rpx）；

let obj = wx.createSelectorQuery(), labelWidth = 0, currentPage = this;
    obj.select('.label-all-index').boundingClientRect();
    obj.exec(function (rect){
      if (rect[0].length > 0){
        for (let i in rect[0]){
          //labelWidth += (rect[0][i].width + 7); //思路一
          labelWidth += (rect[0][i].width * 2 + 14); //思路二
        }
        console.log('各元素宽度之总和===============' + labelWidth)
      }
      currentPage.setData({
        labelListWidth: labelWidth * 2 - 14
      })
    })

结果：

结果出来，不偏不倚，居然刚刚好。从数据上来说，不对呀！有点纳闷儿了！

附：后面，我多方测试，发现思路二还是不对，毕竟代码本身就有问题。最后发现，还是单位RPX的问题，修改了代码后就好了。

代码如下：

let obj = wx.createSelectorQuery(), labelWidth = 0, currentPage = this;
    obj.select('.label-all-index').boundingClientRect();
    obj.exec(function (rect){
      if (rect[0].length > 0){
        for (let i in rect[0]){
          labelWidth += rect[0][i].width;
        }
        labelWidth += 7 * (rect[0].length - 1)
      }
      currentPage.setData({
        labelListWidth: labelWidth
      })
    })

<view class="label-list">

<scroll-view scroll-x="true">

<view class="label-list-text" style="width: {{labelListWidth}}px;"><text wx:for='{{labelList}}' wx:key='' class="label-text-top">{{item.text}}</text></view>

</scroll-view>

</view>