微信小程序—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的能力有待提高。

 

posted @ 2018-08-02 22:29  不火  阅读(139)  评论(0编辑  收藏  举报