微信小程序之view动态布局

wxml

   
       {{item[0].acmonth}}
       {{item[1].acmonth}}
   

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