201711671116 实训学习日志六

（一）主要内容

1、通过第三方接口实现小程序的天气预报功能，在首页添加“一言”。

2、在首页添加“请输入城市名，快速查询天气信息”的输入框。

3、为页面设置背景，背景可以设置边框、调节透明度。

4、通过弹性布局在首页中显示用户头像和用户名，并设置合适的大小、位置分布。

 

（二）相关代码

设置输入框

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

 

.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;
}
 

显示用户头像、昵称

<view class='user'>

  <view class='userAvatar'>
    <open-data type="userAvatarUrl"></open-data>
  </view>

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

 

 

.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; */
}
 

（三）作业

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

完成效果：

 

完善搜索栏功能时加入了查询按钮，可以快速查询地区天气

<button bindtap='clickHandler' style='margin:10rpx' class='primary'>查询</button>
将天气显示出来并使其能够左右滚动

<scroll-view scroll-x="true" class="container1"></scroll-view>

 

.container1{  white-space:nowrap;}