day06作业

#实训作业
完善搜索栏功能
把天气的滚动侧滑栏做出来

index.html

  
  



  




   
      
      {
    {weather.city}}
   
   
      {
    {weather.update_time }}更新
   



   
   {
    {weather.data[0].tem}}
   
   
   {
    {weather.data[0].wea}}
   空气质量：{
    {weather.data[0].air_level}}



  
    
      
     {
    {weather.data[1].day}}
      {
    {weather.data[1].tem}}
      
      
    
    
      
       
     {
    {weather.data[2].day}}
      {
    {weather.data[2].tem}}
      
      
      
    
    
      
       
     {
    {weather.data[3].day}}
      {
    {weather.data[3].tem}}
      
      
      
    
    
      
       
     {
    {weather.data[4].day}}
      {
    {weather.data[4].tem}}
      
      
      
    
  

index1.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    msg: 'Home',
    id: 'txt',
    motto: 'Hello World',
    userInfo: {},
    index: 9,
    yiyan: {},
    weather: {},
    location:'',
    flag: false,
    hasUserInfo: false,
    imgUrls: [
      'https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640',
      'https://images.unsplash.com/photo-1551214012-84f95e060dee?w=640',
      'https://images.unsplash.com/photo-1551446591-142875a901a1?w=640'
    ],
    canIUse: wx.canIUse('button.open-type.getUserInfo'),
    obj: {
      name: "hp",
      index: "0",
      time: "18"
    },

  },

  finish:function(e){
    var _this=this;
    console.log(e.detail.value);
    _this.setData({
      location:e.detail.value
      });
    _this.getWeather(_this);
  },
  getWeather:function(_this){
    var _this = 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)
        _this.setData({
          weather: res.data,
          flag: true,
        })
      }
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var _this=this;
    this.getWeather(_this);
  }

index1.wxss

/* pages/index1/index1.wxss */
/* nav */
page{
  background-image: url(https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1728342470,1033158686&fm=26&gp=0.jpg);
  width: 100%;
  height: 100%;
}
.nav{
  display: flex;
  justify-content: center;
}

.nav>.ipt{
  width: 90%;
  border-bottom: 2rpx solid #ddd;
  padding-left: 60rpx;
  align-items: center;
  box-sizing: border-box;
}

.nav>.pla{
  font-size: 26rpx;
}

.nav>.img{
  width: 40rpx;
  height: 40rpx;
  position: absolute;
  left: 45rpx;
}
/* end nav */

/* userinfo */
.user{
  margin: 20rpx 30rpx;
  display: flex;
  align-items: center;
}
.user>.userArea{
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  overflow: hidden;    /* 切掉图片超出的部分 */
  border:1rpx solid #ddd;
}
.user>.userNick{
  font-size: 28rpx;
  color: #666;
  margin-left: 20rpx;
  font-weight: bold;
}
/* end userinfo */

/* location */
.map{
  margin: 0 40rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #777;
}
.map .img{
  width: 35rpx;
  height: 35rpx;
}
.map .loc{
  font-size: 54rpx;
  margin-left: 20rpx;
}
.map .l-box{
  display: flex;
  align-items: center;
  
}
.map .r-box{
  display: flex;
  align-items: center;
  color: #666;
}
/* end location */

.info{
  height: 600rpx;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  border-bottom: 1px solid #777;
}
.info .tem{
  height: 400rpx;
  line-height: 400rpx;
  font-size: 55px;
  top:-60px;
  color: #777;
  position: relative;
}
.info .tem text{
  position: absolute;
  right: -65rpx;
  top: -30rpx;
  font-size: 20px;
}

.picture{
  height: 90rpx;
  width: 90rpx;

}

.scroll_v{
  display: flex;
  white-space: nowrap;
}

.out {
  /* background: #38B0de; */
  padding: 20px 10px;
  width: 100%;
  white-space: nowrap;
  box-sizing: border-box;
}

/*设置行内块*/

.out  .item {
  width: 100px;
  height: 80px;
  border: 1px solid #38B0de;
  /* background: white; */
  display: inline-block;
  margin-right: 10px;
}

.inner{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

}

效果图：