day06微信小程序项目API讲解

今天继续编写天气预报这个小程序，老师检查了我们提交的作业，发现大多数同学做出来的页面都是把文字堆叠在一起，虽然实现了天气查询的功能，但是界面看起来不美观，且内容繁杂。所以今天老师要求我们做出导航栏顶部的搜索栏，实现各地天气的查询；并作出左右滑动的框，实现左右滑动查看实时天气情况。因为数据内容众多，上网搜索相关天气预报小程序的示例代码，我借鉴了其中的方法及语句。

输入框搜索功能

编写.js文件

 // 输入框搜索功能
  finish:function(e){
    var _this = this;
    // console.log(e.detail.value);
    _this.setData({
      location: e.detail.value
    })
    this.getWeather(_this);
  },

编写.wxml文件

 <input class='ipt' placeholder-class='pla' placeholder='请输入城市名，快速查询天气信息' bindconfirm="finish" ></input>

滚动栏的编写

编写.wxml文件

 <view class='guide' wx:if='{{cityDatas.daily_forecast}}'>
      <view class='title'>7 天预报</view>
      <view class='guides'>
        <view class='item' wx:for='{{cityDatas.daily_forecast}}' wx:key='{{index}}'>
          <view class='date i'>{{item.date}}</view>
          <view class='temperature i'>{{item.tmp_max}}~{{item.tmp_min}}℃</view>
          <view class='weather i'>
            <text>{{item.cond_txt_d}}</text>
            <image mode='widthFix' src='{{weatherIconUrl}}{{item.cond_code_d}}.png'></image>
          </view>
          <view class='wind i'>{{item.wind_dir}}{{item.wind_sc}}级</view>
        </view>
      </view>
    </view>
    <view class='details'>
      <view class='detail' wx:for='{{detailsDic.key}}' wx:key='{{index}}'>
        <view>{{detailsDic.val[item]}}</view>
        <view>{{cityDatas.now[item]}}</view>
      </view>
    </view>
    <view class='hourly' wx:if='{{hourlyDatas.length}}'>
      <view class='title'>24 小时逐 3 小时预报</view>
      <view class='hours'>
        <swiper style='height:360rpx;' indicator-dots="{{false}}" autoplay="{{false}}" circular="{{false}}" duration="300" next-margin="50rpx">
          <block wx:for="{{hourlyDatas}}" wx:key="{{index}}">
            <swiper-item>

功能预览