小程序---二次渲染

 <view class='info_bd'>
    <block>
      <navigator url="" class='info_bd_item' wx:key="id" wx:for='{{infoLists}}'>
        <text class='info_bd_item_title def'>{{item.title}}</text>
        <view wx:for='{{item.labelList}}' wx:for-item="labelList" class='info_bd_item_label_con'>
          <view class='info_bd_item_label'>{{labelList.name}}</view>
        </view>
       <view class='def'></view>
      </navigator>
    </block>
  </view>
.info_bd{
  width: 100%;
  height: auto;
}
.info_bd_item{
  width:100%;
  height:auto;
  border-bottom: 1rpx solid #f3f3f3;
  padding-bottom: 20rpx;
}
.info_bd_item_title{
  float: left;
  font-size: 27rpx;
  margin: 30rpx 0 0 60rpx;
}
.info_bd_item_label_con{
  margin-left: 40rpx;
}
.info_bd_item_label{
  float: left;
  width:10%;
  height: 39rpx;
  background: #d9fcff;
  border-radius: 7rpx;
  font-size: 22rpx;
  color: #4785da;
  line-height: 39rpx;
  margin: 20rpx 0 0 20rpx;
  border: 1rpx solid #a2d0f1;
  text-align: center;
}
infoLists:[
      {
        id:1,
        title:'治未病向人类思维再次敲响警钟',
        labelList:[
          {
            id:10,
            name:'保健'
          },
          {
            id:11,
            name:'保健'
          }
        ]
      },
      {
        id: 12,
        title: '小儿感冒咳嗽防病养生谋略',
        labelList: [
          {
            id: 21,
            name: '小儿'
          },
          {
            id: 22,
            name: '感冒'
          }
        ]
      },
      {
        id: 3,
        title: '治未病向人类思维再次敲响警钟',
        labelList: [
          {
            id: 30,
            name: '保健'
          },
          {
            id: 31,
            name: '保健'
          }
        ]
      }
    ]

猜你喜欢

转载自blog.csdn.net/Ariel_201311/article/details/81322238