完善版天气界面
部分WXML代码
<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>
学习总结
今天继续完善微信小程序项目第三方接口应用(天气查询),按照网上的天气小程序模板,在原有的基础上继续修改天气的界面,除了要实现定位地区天气的功能,还要设计出其他的辅助显示界面,力图在手机平面上以小空间放更多的信息数据供别人参考,但同时也要避免排版呆板,要灵活展现小程序要体现的数据。