day06作业

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

index.html

<!--pages/index1/index1.wxml-->
<view class='nav'>
  <image class='img' src='../../assets/icons/weather.png'></image>
  <input class='ipt' placeholder='请输入城市名，快速查询天气信息' value='' bindconfirm='finish'></input>
</view>

<view class='user'>
  <open-data class='userArea' type="userAvatarUrl"></open-data>
<open-data class='userNick' type="userNickName"></open-data>
</view>

<view class='map'>
   <view class='l-box'>
      <image class='img' src='../../assets/icons/acmap.png'></image>
      <text class='loc'>{{weather.city}}</text>
   </view>
   <view class='r-box'>
      <text>{{weather.update_time }}更新</text>
   </view>
</view>

<view class='info'>
   <view class='tem'>
   {{weather.data[0].tem}}
   <image class='picture' src='../../assets/icons/cucumber/{{weather.data[0].wea_img}}.png'></image>
   </view>
   <text class='wea'>{{weather.data[0].wea}}</text>
   <text>空气质量：{{weather.data[0].air_level}}</text>
</view>

<view class='out'>
  <scroll-view scroll-x scroll-into-view='item1'>
    <view id='item1' class='item'>
      <view class='inner'>
     <text>{{weather.data[1].day}}</text>
      <text>{{weather.data[1].tem}}</text>
      <image class='picture' src='../../assets/icons/cucumber/{{weather.data[1].wea_img}}.png'></image>
      </view>
    </view>
    <view id='item2' class='item'>
      <view class='inner'>
       <view class='inner'>
     <text>{{weather.data[2].day}}</text>
      <text>{{weather.data[2].tem}}</text>
      <image class='picture' src='../../assets/icons/cucumber/{{weather.data[2].wea_img}}.png'></image>
      </view>
      </view>
    </view>
    <view class='item'>
      <view class='inner'>
       <view class='inner'>
     <text>{{weather.data[3].day}}</text>
      <text>{{weather.data[3].tem}}</text>
      <image class='picture' src='../../assets/icons/cucumber/{{weather.data[3].wea_img}}.png'></image>
      </view>
      </view>
    </view>
    <view class='item'>
      <view class='inner'>
       <view class='inner'>
     <text>{{weather.data[4].day}}</text>
      <text>{{weather.data[4].tem}}</text>
      <image class='picture' src='../../assets/icons/cucumber/{{weather.data[4].wea_img}}.png'></image>
      </view>
      </view>
    </view>
  </scroll-view>
</view>

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;

}

效果图：