zoukankan      html  css  js  c++  java
  • 微信小程序分列显示数据

    效果图

    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;
    }
  • 相关阅读:
    HDU 1269 迷宫城堡 tarjan算法求强连通分量
    hrbust 1721 A + B = 0 map的应用
    关于vis标记
    poj 1703
    poj1961 kmp
    acm poj1260 dp
    矩阵链乘 hrbust 1600
    单源最短路径 hdu 2066
    最小生成树
    多维背包 hrbudt 1335 算法与追MM
  • 原文地址:https://www.cnblogs.com/wys000/p/11075626.html
Copyright © 2011-2022 走看看