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;
    }
  • 相关阅读:
    部署prerender服务器
    Bzoj4727--Poi2017Turysta
    Bzoj4818--Sdoi2017序列计数
    Heoi2014系列题解
    scoi2017酱油记
    Burnside引理与Pólya定理
    2017省选前北京集训总结
    奥妙重重的随机发生器
    ???--???Insection is not allowed
    反演
  • 原文地址:https://www.cnblogs.com/wys000/p/11075626.html
Copyright © 2011-2022 走看看