微信小程序开发 Day06

因为要准备计算机系统的考试，所以第六第七天的博客有点小延迟发出来呃

任务：完善搜索栏功能，将天气的滚动侧滑栏做出来。

完善搜索栏功能，将天气的滚动侧滑栏做出来。

直接上源代码了，侧栏滑动是按照微信公众平台的模板编写，没有进行修改的版本。

js源代码：

const app = getApp()
Page({
  data: {
    update_time:"00-00 00:00",
    tem:"-272",
    wea:"晴",
    air_level:"良",
    toView: 'green',
    scrollTop: 100,
  },
  // seven
  upper: function (e) {
    console.log(e)
  },
  lower: function (e) {
    console.log(e)
  },
  scroll: function (e) {
    console.log(e)
  },
  tapMove: function (e) {
    this.setData({
      scrollTop: this.data.scrollTop + 10
    })
  },
  // endseven
  onLoad: function () {
    // 天气请求
    var _this = this;
    wx.request({
      url: 'https://www.tianqiapi.com/api/',
      method: "get",
      dataType: "json",
      data: {
        version: 'v1',
        city: '湛江'
      },
      header: {
        'content-type': 'application/json'
      },
      success(res) {
        console.log(res.data)
        _this.setData({
          weather: res.data,
          flag: true,
          todayIcon: '../../images/weather/' + res.data.data[0].wea_img + '.png',
          update_time: res.data.update_time.substr(5, 11),
          tem:res.data.data[0].tem,
          wea:res.data.data[0].wea,
          air_level:res.data.data[0].air_level,
        })
      }
    })
  },
  getUserInfo: function(e) {
    console.log(e)
    app.globalData.userInfo = e.detail.userInfo
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  }
})

wxml源代码：

<!-- nav -->
<view class='nav'>
<image class='img' src='../../images/weather/放大镜.png'></image>
<input class='ipt' placeholder-class='pla' placeholder='请输入城市名，快速查询天气信息'></input>
</view>
<!-- endnav -->
<!-- user -->
<view class='user'>
<view class='useravatar'>
<open-data type='userAvatarUrl'></open-data>
</view>
<open-data type='userNickName' class="usernick"></open-data>
</view>
<!-- userend -->
<!--  location  -->
<view class='map'>
<view class='l-box'>
<image class='img' src='../../images/weather/地图.png'></image>
<text class='loc'>麻章</text></view>
<text class='r-box'>{{update_time}}更新</text>
</view>
<!--  endlocation  -->
<!-- weather -->
<view class='info'>
<view class='tem'>
{{tem}}<text>℃</text>
</view>
<text class='wea'>{{wea}}</text>
<text class='air_level'>空气质量:{{air_level}}</text>
</view>
<!-- endweather -->

<!-- seven -->

    <scroll-view scroll-x style="width:100%">
      <view class="scroll-view_H">

        <view class="scroll-view-item_H bc_green">
        </view>
        
           <view class="scroll-view-item_H bc_red">
        </view>

        <view class="scroll-view-item_H bc_yellow">
        </view>
        
        <view class="scroll-view-item_H bc_blue">
        </view>

      </view>
    </scroll-view>

<!-- endseven -->

wxss源代码：

page{
  height: 100%;
  background:url(http://3999n.kx9966.com:399/d/file/96kaifa/201811210421/5b88e0b787fd3.jpg) no-repeat 0 0;
  background-size: 100% 100%;
}
/* nav */
.nav{
  padding-top: 20rpx;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.nav>.ipt{
  width: 90%;
  border-bottom: 2rpx solid #ffffff;
  padding-left: 60rpx;
  box-sizing: border-box;
}
.pla{
  font-size: 35rpx;
}
.nav>.img{
  margin-top: 20rpx;
  width: 37rpx;
  height: 37rpx;
  position: absolute;
  left: 54rpx;
  top:0rpx;
}
/* endnav */
/* user */
.user{
  display: flex;
  align-items: center;
  margin: 20rpx 34rpx 0rpx;
}
.user>.useravatar{
width: 65rpx;
height: 65rpx;
border-radius: 50%;
overflow: hidden;
border: 1rpx solid #ffffff;
}
.user>.usernick{
  font-size: 30rpx;
  color: #ffffff;
  margin-left: 20rpx;
}
/* enduser */
/* location */
.map{
  margin:0rpx 40rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.map .l-box{
  display:flex;
  align-items: center;
}
.map .r-box{
  font-size: 28rpx;
  color: #ffffff;
}
.map .img{
   width: 45rpx;
  height: 45rpx;
}
.map .loc{
  font-size: 70rpx;
  color: #ffffff;
  margin-left: 15rpx;
}
/* endlocation */
/* weather */
.info{
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}
.info .tem{
  height: 400rpx;
  line-height: 400rpx;
  font-size: 150rpx;
  color: #ffffff;
  position: relative;
}
.info .tem text{
  font-size: 30rpx;
  position: absolute;
  top:-35rpx;
  right: -35rpx;
}
.info .wea{
  color: #ffffff;
}
.info .air_level{
  font-size: 28rpx;
  margin: 10rpx;
  color: #ffffff;
}
/* endweather */
/* seven */
.scroll-view-item{
  height: 80px;
  width: 400px;
}
.scroll-view_H{
  display: flex;
  height: 120px;
  width: 500px;
  flex-direction: row;
}
.scroll-view-item_H{
  width: 200px;
  height: 100px;
}
.bc_green{
  background: green;
}
.bc_red{
  background: red;
}
.bc_yellow{
  background: yellow;
}
.bc_blue{
  background: blue;
}
.scroll-view-y{
  height: 200px;
}

/* endseven */

实现效果图：