201711671226 信管1172 实训总结五

天气界面

<view class="newTopView">
<!--左边添加当前城市名字，点击跳转选择城市 右边添加刷新当前天气-->
</view>
<view class="topView">
  <view class="degreeView">
<!--当前温度-->
    <text class="degree">{{tianqi.data[0].tem}}</text>

  </view>
  <view class="detailInfo">
    <view class="degreeView">
<!--夜间天气情况-->
      <text class="detailInfoDegree">{{tianqi.data[0].tem2}}</text>

      <text class="detailInfoLine">/</text>
<!--白天天气-->
      <text class="detailInfoDegree">{{tianqi.data[0].tem1}}</text>
<!-- style优先级比class高会覆盖class中相同属性 -->

<!-- 当前天气名字 -->
      <text class="detailInfoName">{{tianqi.data[0].wea}}</text>
    </view>
  </view>
</view>
<!-- 中间部分 -->
<view class="centerView">
  <view class="centerItem" style="margin-right: 25rpx;">
<!-- 相同属性抽出来！ -->
<!--污染指数-->
    <text class="centerItemText" style="margin-left: 10rpx; margin-right: 10rpx">空气质量：{{tianqi.data[0].air_level}}</text>
  </view>
  <view class="centerItem" style="margin-left: 25rpx">
    <text class="centerItemText" style="margin-left: 10rpx; margin-right: 10rpx">风向：{{tianqi.data[0].win_speed}}</text>
<!--风-->
    <text class="centerItemText">{{tianqi.data[0].win[0]}}</text>
  </view>
</view>
<!-- 底部view -->
<view class="bottomView">
 <!--数据返回的不是数组 在js中拼接的数组-->
  <block wx:for-items="{{tianqi.data}}" wx:key="date">
    <view class='bottomItem'>
    <view class="bottomItemView">
      <image class="bottomImage" src="../../sogo/{{item.wea_img}}.png"            style="margin-bottom: 15rpx;" />
      <text class="bottomText">{{item.week}}</text>
    </view>
    <view class="degreeView" style="margin-top: 20rpx;">
      <text class="bottomText">{{item.tem2}}</text>
      <text class="bottomText">/</text> 
      <text class="bottomText">{{item.tem1}}</text>
    </view>
    </view>
  </block>
</view>

 

 

学习总结

今天继续进行项目演示，主要是学习制作显示出天气界面，发现的问题是其实还是原来一直存在的短板，但开始有有趣的界面可以尝试制作，心里对这个产生了兴趣，每天坚持解决一个问题，作出一个界面，得到的收获就会不一样