学习笔记6

显示天气详情，七天天气滑动查看

.js

//index.js

//获取应用实例

const app = getApp()

 

Page({

  data:{

    location:"",

    weather:{},

    top: ' ',

    left: ' ',

 

  },

  

  // 输入框搜索功能

  finish:function(e){

    var _this = this;

    // console.log(e.detail.value);

    _this.setData({

      location: e.detail.value

    })

    this.getWeather(_this);

  },

 

  // 获取天气

  getWeather:function(_this){

    wx.request({

      url: 'https://www.tianqiapi.com/api/', //仅为示例，并非真实的接口地址

      method: "get",

      dataType: "json",

      data: {

        version: "v1",

        city: _this.data.location

      },

      header: {

        'content-type': 'application/json' // 默认值

      },

      success(res) {

        console.log(res.data)

        // console.log(res.data.update_time.substr(5,11))

        _this.setData({

          weather: res.data,

          time:res.data.update_time.substr(5,11),

          temp:res.data.data[0].tem.substr(0,2)

        })

 

      }

    });

  },

  

  onLoad: function () {

    var _this = this;

    //发起一个网络请求 weather

    this.getWeather(_this);

  }

})

 

 

.wxml

<!-- nav -->

<view class='nav'>

  <image class='img' src='../../assets/icons/icon.png'></image>

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

</view>

<!-- ENDnav -->

 

<!-- user -->

<view class='user'>

 

  <view class='userAvatar'>

    <open-data type="userAvatarUrl"></open-data>

  </view>

 

  <open-data class="userNick" type="userNickName"></open-data>

</view>

<!-- END user -->

 

<!-- location -->

<view class='map'>

 

  <view class='l-box'>

    <image class="img" src='../../assets/icons/location.png'></image>

    <text class='loc'>{{weather.city}}</text>

  </view>

 

    <text class='r-box'>{{time}} 更新</text>

  

</view>

<!-- END location -->

 

<!-- weather -->

<view class='info'>

  <view class='tem'>

    {{temp}} <text>℃</text>

  </view>

  <text class='wea'>{{weather.data[0].wea}}</text>

  <text class='air_level'>空气质量{{weather.data[0].air_level}}</text>

</view>

<!-- END weather -->

 

<view class='con'></view>

<scroll-view scroll-x class="scroll-header">

<view id="green" class="scroll-view-item bc_green">

 <text>{{weather.data[1].date}}

 {{weather.data[1].week}}

 {{weather.data[1].wea}}

 {{weather.data[1].tem2}} ~ {{weather.data[1].tem1}}</text></view>

<view id="red" class="scroll-view-item bc_red">

 <text>{{weather.data[2].date}}

 {{weather.data[2].week}}

 {{weather.data[2].wea}}

 {{weather.data[2].tem2}} ~ {{weather.data[2].tem1}}</text></view>

<view id="yellow" class="scroll-view-item bc_yellow">

 <text>{{weather.data[3].date}}

 {{weather.data[3].week}}

 {{weather.data[3].wea}}

 {{weather.data[3].tem2}} ~ {{weather.data[3].tem1}}</text></view>

<view id="blue" class="scroll-view-item bc_blue">

 <text>{{weather.data[4].date}}

 {{weather.data[4].week}}

 {{weather.data[4].wea}}

 {{weather.data[4].tem2}} ~ {{weather.data[4].tem1}}</text></view>

<view id="blue" class="scroll-view-item bc_blue">

 <text>{{weather.data[5].date}}

 {{weather.data[5].week}}

 {{weather.data[5].wea}}

 {{weather.data[5].tem2}} ~ {{weather.data[5].tem1}}</text></view>

<view id="blue" class="scroll-view-item bc_blue">

 <text>{{weather.data[6].date}}

 {{weather.data[6].week}}

 {{weather.data[6].wea}}

 {{weather.data[6].tem2}} ~ {{weather.data[6].tem1}}</text></view>

</scroll-view>

 

.wxss

/**index.wxss**/

page{

  height: 100%;

   background:url(https://i04piccdn.sogoucdn.com/797105c7560dd863) no-repeat 0 0;

  background-size: 100% 100%;

}

.nav{

display: flex;

justify-content: center;

align-items: center;

position: relative;

}

.nav>.ipt{

  width: 90%;

  border-bottom: 2rpx solid #ddd;

  padding-left: 60rpx;

  box-sizing: border-box;

}

.pla{

  font-size: 26rpx;

}

.nav>.img{

  width: 40rpx;

  height: 40rpx;

  position: absolute;

  left: 45rpx;

  top: 5rpx;

}

/* END nav */

 

/* userinfo */

.user{

  margin: 20rpx 34rpx 0rpx;

  display: flex;

  align-items: center;

}

.user>.userAvatar{

  width: 55rpx;

  height: 55rpx;

  border-radius: 50%;

  overflow: hidden;

  border: 1rpx solid #ddd;

}

.user>.userNick{

  font-size: 28rpx;

  color: #888;

  margin-left: 20rpx;

  /* font-weight: bold; */

}

/* END userinfo */

 

 

/* location */

.map{

  margin: 0 40rpx;

  display: flex;

  align-items: center;

  justify-content: space-between

}

.map .l-box{

  display: flex;

  align-items: center;

}

.map .img{

  width: 35rpx;

  height: 35rpx;

}

.map .loc{

  font-size: 54rpx;

  margin-left: 15rpx;

  color: #777;

}

.map .r-box{

  font-size: 26rpx;

  color: #999;

}

/* END location */

 

/* weather */

.info{

  height: 600rpx;

  display: flex;

  flex-direction: column;

  justify-content: flex-end;

  align-items: center;

}

.info .tem{

  height: 400rpx;

  line-height: 400rpx;

  font-size: 120rpx;

  color: #777;

  position: relative;

}

.info .tem text{

  position:absolute;

  right:-30rpx;

  top:-15rpx;

  font-size:30rpx;

}

.info .wea{

  color: #666;

  margin-top:-100rpx;

}

.info .air_level{

  margin: 10rpx;

  font-size: 30rpx;

  color: #777;

}

/* END weather */

 

.con{

  height: 200rpx;

  width: 100%

}

scroll-view{

  height: 200rpx;

  background-color:rgba(0,0,0,.3);

}

.scroll-header{

display: flex;

 

white-space: nowrap;

color: #383737

}

.scroll-header view{

height:200rpx;

width:240rpx;

border:none;

display: inline-block;

}