微信小程序分列显示数据

效果图

 

wxml代码

<view class='onehandle5'>
      <block wx:for="{{3}}" wx:for-index="k" wx:for-item="item_k" wx:key="key">
        <view class="useage2">{{weatherData.data[item_k].day}}</view>
      </block>
    </view>

    <view class='onehandle5'>
      <block wx:for="{{3}}" wx:for-index="k" wx:for-item="item_k" wx:key="key">
        <view wx:if='{{weatherData.data[item_k].wea_img}}' class="useage2 ">
          <image src='../../images/qq/{{weatherData.data[item_k].wea_img}}.png'></image>
        </view>
      </block>
    </view>

    <view class='onehandle5'>
      <block wx:for="{{3}}" wx:for-index="k" wx:for-item="item_k" wx:key="key">
        <view class="useage2">{{weatherData.data[item_k].tem2}}~{{weatherData.data[item_k].tem1}}</view>
      </block>
    </view>

    <view class='onehandle5'>
      <block wx:for="{{3}}" wx:for-index="k" wx:for-item="item_k" wx:key="key">
        <view class="useage2">{{weatherData.data[item_k].win[0]}}</view>
      </block>
    </view>

    <view class='onehandle5'>
      <block wx:for="{{3}}" wx:for-index="k" wx:for-item="item_k" wx:key="key">
        <view class="useage2">风速{{weatherData.data[item_k].win_speed}}</view>
      </block>
    </view>

wxss代码

.onehandle5 {
  display: flex;
   justify-content: center;
}
.useage2 {
  width: 30%;
  margin: 6rpx 0 6rpx 0;
  height: 107rpx;
  text-align: center;
  border-radius: 15rpx;
  font-size: 30rpx;
}
.useage2 image{
  width:64rpx;
  height: 64rpx;
}