實訓第六天：搜索框佈局及功能實現，實現上下滑動

1.實現小程序天氣預報搜索框
<input class='ipt' placeholder-class='pla' placeholder='請輸入城市名，快速查詢天氣信息' bindconfirm="finish" ></input>
wxss
.pla{
  font-size: 26rpx;
}
.nav>.img{
  width: 40rpx;
  height: 40rpx;
  position: absolute;
  left: 45rpx;
  top: 5rpx;
}
2.實現搜索功能
<!-- weather -->
<view class='info'>
<view class='tem'>
{{tem}} <text>℃</text>
wxss：
.info .tem text{
  position:absolute;
  right:-30rpx;
  top:-15rpx;
  font-size:30rpx;
}
.info .wea{
  color: #666;
}
.info .air_level{
  margin: 10rpx;
  font-size: 30rpx;
  color: #777;
}
3.實現左右滑動：
<view class="section section_gap">
  <view class="title">未來六天天氣</view>
  <scroll-view class="scroll-view_H" scroll-x style="width: 100%">
    <view class="scroll-view-item_H bc_pink">
    <view>{{weather.data[0].day}}</view>
    <view>{{weather.data[0].wea}}</view>
    <image src='../../images/{{weather.data[0].wea_img}}.png' style='width:70%;height:80px'></image></view>
    <view  class="scroll-view-item_H bc_pink">
    <view>{{weather.data[1].day}}</view>
    <view>{{weather.data[1].wea}}</view>
        <image src='../../images/{{weather.data[1].wea_img}}.png' style='width:70%;height:80px'></image></view>
    <view  class="scroll-view-item_H bc_pink">
    <view>{{weather.data[2].day}}</view>
    <view>{{weather.data[2].wea}}</view>
        <image src='../../images/{{weather.data[2].wea_img}}.png' style='width:70%;height:80px'></image>
    </view>
    <view class="scroll-view-item_H bc_pink">
    <view>{{weather.data[3].day}}</view>
    <view>{{weather.data[3].wea}}</view>
        <image src='../../images/{{weather.data[3].wea_img}}.png' style='width:70%;height:80px'></image>
    </view>
     <view  class="scroll-view-item_H bc_pink">
     <view>{{weather.data[4].day}}</view>
    <view>{{weather.data[4].wea}}</view>
        <image src='../../images/{{weather.data[4].wea_img}}.png' style='width:70%;height:80px'></image></view>
    <view class="scroll-view-item_H bc_pink">
    <view>{{weather.data[5].day}}</view>
    <view>{{weather.data[5].wea}}</view>
     <image src='../../images/{{weather.data[4].wea_img}}.png' style='width:70%;height:80px'></image></view>
  </scroll-view>
</view>
最後頁面截圖：