实训第七天

<scroll-view class="scroll-view_H" scroll-x="true">

   <view class="scroll-view-item_H" wx:for="{{weatherweek.data}}">

      <view>{{item.date}}</view>

   <view>{{item.tem2}}~{{item.tem1}}</view>

      <view class='wea'>{{item.wea}}<image class='wea_img' src='../../weaicon/{{item.wea_img}}.png'></image></view>

      <view>{{item.win[0]}}{{item.win_speed}}</view> 

  </view>

</scroll-view>

 

<!-- 描述 -->

<view class="detail">

  <view class="item">

    <text>温度(℃)</text>

    <text>{{weather.tem}}</text>

  </view>

  <view class="item">

      <text>湿度(%)</text>

    <text>{{humidity}}</text>

  </view> 

  <view class="item">

        <text>PM2.5</text>

    <text>{{weather.air_pm25}}</text>

  </view>

    <view class="item">

      <text>气压(hPa)</text>

      <text>{{weather.pressure}}</text>

    </view>   

 

  <view class="item">

    <text>风向</text>

    <text>{{weather.win}}</text>

  </view> 

 

  <view class="item">

   <text>风速</text>

    <text>{{weather.win_meter}}</text></view>  

      <view class="item">

      <text>风速等级</text>

    <text>{{weather.win_speed}}</text>

  </view>  

 

  <view class="item">

  <text>能见度</text>

    <text>{{weather.visibility}}</text>

  </view>

 

   <view class="item">

  <text>风力</text>

    <text>{{weather.win_speed}}</text>

  </view>   

 

  <view class="item">

  <text>小时空气</text>

    <text>{{weather.hours}}</text>

  </view> 

 

</view>

感想：

今天的任务依然是在天气预报页面的基础上添加相关的应用和功能。实现可以定位，对该位置进行天气预报的查询，以及设计出其他辅助的显示页面。在掌握了相关的用法之后，我们要力求追求页面的精美，不要使得小程序的页面过于呆板。