微信小程序之view动态布局

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)
  }
})