昨日问题
接着上一篇，昨天遇到的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="">
<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 ;
}
.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: %;
}
.portrait-background {
position: relative;
}
.portrait-user {
position: absolute;
top: 60px;
left: 155px;
justify-content: center;
}
.portrait {
width: 64px;
height: 64px;
border-radius: %;/*圆角属性*/
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，在编写代码时，可以打印查看信息。
用户页的呈现：