微信小程序—day03

昨日问题

接着上一篇，昨天遇到的scroll-view组件不能滚动的问题。

今天经过调试，发现是由于：图片的实际宽高，大于给image设定的宽高导致的。

• 解决办法：
• 减小图片的实际宽高，使之小于image设定的值。image组件默认宽度300px、高度225px 。

滚动区域代码：

wxml代码：

<view class='like'>
  <text class='like-head'>猜你喜欢</text>
  <scroll-view class='like-body' scroll-x="true" scroll-left="100">
    <view wx:for="{{likeList}}" class='like-item'>
      <image class='like-img' src='{{item.imgUrl}}' mode='scaleToFill'></image>
      <view class='like-title'>{{item.title}}</view>
    </view>
  </scroll-view>
</view>

 

wxss代码：

.like {
  margin-top: 10px;
  background: #fff;
  padding: 10px 0;
}
.like-head {
  text-align: center;
  padding-left: 5px;
  font-size: 16px;
  color: #8CBEF5;
}
.like-body {
  white-space: nowrap;/*段落中的元素不进行换行*/
  margin-top: 10px;
}
.like-item {
  display: inline-block;
  text-align: center;
}
.like-img {
  width: 300px;
  height: 200px;
  margin-right: 5px;
}
.like-title {
  text-align: center;
  font-size: 12px;
  color: #8CBEF5;
}

 

滚动展示图：

用户界面

完成了主页之后，进行用户界面的编写。

这里需要用到一系列的api，具体看官方文档

用户界面的上半部分，需要获取用户的头像和姓名，分别使用wx.getSetting和wx.getUserInfo

wxml代码：

<view class='top-user'>
  <view class='portrait-background'>
    <image src='{{BgUrl}}' class='portraitBg' mode='widthFix'></image>
    <view class='portrait-user'>
      <image src='{{avatarUrl}}' class='portrait' mode='widthFix'></image>
      <view class='username'>{{nickName}}</view>
    </view>
  </view>
</view>

wxss代码：

.portraitBg {
  width: 100%;
}
.portrait-background {
  position: relative;
}
.portrait-user {
  position: absolute;
  top: 60px;
  left: 155px;
  justify-content: center;
}
.portrait {
  width: 64px;
  height: 64px;
  border-radius: 50%;/*圆角属性*/
  margin-bottom: 5px;
}
.username {
  text-align: center;
  top: 130px;
  color: #0000ff6b;
}

js代码：

/**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    wx.getSetting({
      success:()=>{
        // console.log(res);
        wx.getUserInfo({
          success:(res)=>{
            // console.log(res);
            this.setData({
              nickName: res.userInfo.nickName,
              avatarUrl: res.userInfo.avatarUrl
            })
          }
        })
      }
    })
  },

通过console.log，在编写代码时，可以打印查看信息。

用户页的呈现：

 

总结：今日的效率有点低，主要时间花在解决昨日的问题上；看来改bug的能力有待提高。