微信小程式之view動態佈局
阿新 • • 發佈:2018-11-20
wxml
<view class='main'>
<view wx:for="{{long}}" wx:key="*this" class='items'>
<view class='il'>{{item[0].acmonth}}</view>
<view class='ir' wx:if="{{item[1]!=undefined}}">{{item[1].acmonth}}</view>
</view>
</view>
wxss
page{width: 100%;height: 100%;} .main{display: flex;flex-direction: column;} .items{display: flex;} .il{width: 40%;height: 80px; text-align: center;border: 1px solid #000;margin: 5%;box-sizing: border-box;} .ir{width: 40%;height: 80px; text-align: center;border: 1px solid #000;margin: 5%;box-sizing: border-box;}
js
Page({ data: { active: [{ "acmonth": 1, "actype": "游泳" }, { "acmonth": 4, "actype": "游泳" }, { "acmonth": 8, "actype": "游泳" }, { "acmonth": 1, "actype": "游泳" }, { "acmonth": 6, "actype": "游泳" }, { "acmonth": 7, "actype": "游泳" }, { "acmonth": 3, "actype": "游泳" }, { "acmonth": 8, "actype": "游泳" }, { "acmonth": 11, "actype": "游泳" }, { "acmonth": 1, "actype": "游泳" }, { "acmonth": 12, "actype": "游泳" }, { "acmonth": 9, "actype": "游泳" }, { "acmonth": 5, "actype": "游泳" }, { "acmonth": 2, "actype": "游泳" }, { "acmonth": 6, "actype": "游泳" }], long:[] }, /** * 生命週期函式--監聽頁面載入 */ onLoad: function (options) { console.log(this.data.active) var total=this.data.active var xin=[] for(var i=0;i<total.length;i++){ for(var j=0;j<total.length/2;j++){ if (i / 2 == j){ console.log(i) xin[j]=[total[i],total[i+1]] } } } this.setData({ long:xin }) console.log(this.data.long[7][1]==undefined) } })