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;
    }
  • 相关阅读:
    14 DOM案例
    13 client&offset&scroll
    12 DOM操作节点&定时器
    脚下的路
    甘于寂寞
    为创意埋单,为知识产权埋单,为精细化服务埋单
    在那东山顶上
    你们都以落第为耻,我却以落第动心为耻
    决定经常性更新博客
    怎样以最快的速度导入mysql
  • 原文地址:https://www.cnblogs.com/wys000/p/11075626.html
Copyright © 2011-2022 走看看