小程序--獲取容器內各元素寬度之和-坑

已知元素個數和各元素之間的距離（單位：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>