微信小程序?qū)崿F(xiàn)常見的user效果

在開發(fā)一個(gè)微信小程序過(guò)程中，如果要實(shí)現(xiàn)常見的user效果，應(yīng)該如何開發(fā)微信小程序呢。

wxml

1. <view class='circle'>
2. <view class='userAvatar'>
3. <open-data type="userAvatarUrl" ></open-data>
4. </view>
5. </view>

代碼說(shuō)明：  open-data沒有辦法直接給一個(gè)class然后控制類名，但是可以通過(guò)控制外部盒子達(dá)到控制它本身的大小以及形狀的目的。

wxss

1. .circle{
2. width:930rpx;
3. height:930rpx;
4. border-radius:465rpx;
5. background-color:#2ca6cb;
6. margin-top:-666rpx;
7. margin-left:-90rpx;
8. display:flex;
9. align-items:center;
10. flex-direction:column-reverse;
11. }
12. .userAvatar{
13. width:80px;
14. height:80px;
15. border-radius:40px;
16. margin-bottom:-30px;
17. overflow: hidden;
18. }

說(shuō)明：通過(guò)flex布局控制頭像的位置。

以上就是微信小程序?qū)崿F(xiàn)常見的user效果的開發(fā)文檔，更多小程序開發(fā)文檔可以關(guān)注網(wǎng)站。

HiShop小程序工具提供多類型商城/門店小程序制作，可視化編輯 1秒生成5步上線。通過(guò)拖拽、拼接模塊布局小程序商城頁(yè)面，所看即所得，只需要美工就能做出精美商城。更多小程序請(qǐng)查看：小程序商店