微信小程序一維數(shù)組二維的方式輸出實現(xiàn)（獲取）
2021-08-07 23:42:55

小程序開發(fā)中會遇到一個 一維數(shù)組對象需要按照多維輸出的情況

微信小程序不像Vue那樣好用，可以直接數(shù)據(jù)綁定

如下有6個對象（圖片picUrl和name是我想輸出的內(nèi)容）我要按照下面的輸出的效果則需要構(gòu)造嵌套for循環(huán)輸出，需要將一維數(shù)值變成二維數(shù)組

          let arr = [1,2,3,4,5,6]
          let result=[]
          for(let i=0;i<arr.length;i+=3){
            result.push(arr.slice(i,i+3))//拆成長度為3的二維數(shù)組
          }//result的結(jié)果是[[1,2,3],[4,5,6]]

下面的myPlayList是一個二維數(shù)組id1由0-1，id2由0-2輸出上面的兩行三列的布局

不得不說這種方式真麻煩變量不能執(zhí)行運算操作（主要是字符串中的{{ }}不能進行簡單的運算非常麻煩）

<i-row wx:for="{{myPlayList}}" wx:for-index="id1">
  <i-col wx:for="{{item}}" wx:for-item="item2" wx:for-index="id2"  span="8" i-class="col-class">
      <i-row>
        <cover-image class="imgclass" src="{{item2.picUrl}}"></cover-image>
      </i-row>
      <i-row i-class="myPlayListFontSize">{{item2.name}}</i-row>
  </i-col>
</i-row>

這樣獲取點擊的元素是哪一個又異常麻煩通過bindtop綁定函數(shù)很難獲取點擊的元素

比如點擊（你好2020）最后一個，通過已有的數(shù)組找到這個對象得再加一層（并且設(shè)置id值為遞增）

<i-row wx:for="{{myPlayList}}" wx:for-index="id1">
  <i-col wx:for="{{item}}" wx:for-item="item2" wx:for-index="id2" span="8" i-class="col-class">
    <!-- 跳轉(zhuǎn)頁面 toPage函數(shù) -->
    <view bindtap="toPage" id="{{ id1==0 ? id2 : 3+id2 }}">
      <i-row>
        <cover-image class="imgclass" src="{{item2.picUrl}}"></cover-image>
      </i-row>
      <i-row i-class="myPlayListFontSize">{{item2.name}}</i-row>
    </view>
  </i-col>
</i-row>

這樣就可以通過點擊事件的對象中的 currentTarget中的id獲取到這個對象（還得轉(zhuǎn)換成二維數(shù)組）

?

為何不可以先輸出布局然后通過0,1,2,3,4,5將文件放入進去？嵌套for的id值不能直接在標簽中的{{? }}運算很不方便！

?

?

?