小程序開發(fā)中會遇到一個 一維數組對象需要按照多維輸出的情況
微信小程序不像Vue那樣好用,可以直接數據綁定
如下有6個對象(圖片picUrl和name是我想輸出的內容)我要按照下面的輸出的效果則需要構造嵌套for循環(huán)輸出,需要將一維數值變成二維數組
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的二維數組 }//result的結果是[[1,2,3],[4,5,6]]
下面的myPlayList是一個二維數組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綁定函數很難獲取點擊的元素
比如點擊(你好2020)最后一個,通過已有的數組找到這個對象得再加一層(并且設置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"> <!-- 跳轉頁面 toPage函數 --> <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獲取到這個對象(還得轉換成二維數組)
?
為何不可以先輸出布局然后通過0,1,2,3,4,5將文件放入進去?嵌套for的id值不能直接在標簽中的{{? }}運算很不方便!
?
?
?
本文摘自 :https://blog.51cto.com/u