实训 Day06 实习日志

今天主要学习了对项目（天气预报页面）的操作，针对天气API接口获取的信息进行页面布局，主要是美化天气预报的界面和对界面的布局加深了解。还讲解了视图容器scroll-view的用法，对于今天的内容大概已经掌握，并且能做出作业。

scroll-view：可滚动视图区域。使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。

关于scroll-view的具体内容可以自行去微信公众平台的文档中心-组件-视图容器查看。

下述scroll-view的部分：

index.wxml:

<view class='s_h'>
<text class='size'>逐时天气情况</text>
<scroll-view class='a_box' scroll-x='true' style='width:100%'>
<view class='box' wx:for='{{weather.data[0].hours}}' wx:key='{{index}}'>
    <view>{{item.day}}</view>
    <view>{{item.tem}}·{{item.wea}}</view>
    <view>{{item.win}}{{item.win_speed}}</view>
</view>
</scroll-view>
</view>

index.wxss:

.s_h .a_box{
  height: 160%;
  display: flex;
  white-space: nowrap;  //这个不可缺少
}
.s_h .box {
    height:25%; 
    width: 50%;
    display: inline-block;
    border-right: 1rpx solid pink; 
    text-align: center;
    font-size: 24rpx;
    background-color:  azure;
}
.box>view{
    margin: 6rpx 0;
}

.s_h{
height: 300rpx;
}
.s_h .size{
  position: relative;
  left: 40rpx;
  color: #666;
  font-size: 30rpx;
}

 

作业
1、完善搜索栏功能
2、把天气的滚动侧滑栏做出来