商城系統(tǒng) 注冊

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

2018-08-16|HiShop
導讀:在開發(fā)一個微信小程序過程中,如果要實現(xiàn)常見的user效果,應該如何開發(fā)微信小程序呢。...

在開發(fā)一個微信小程序過程中,如果要實現(xiàn)常見的user效果,應該如何開發(fā)微信小程序呢。

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

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

wxml


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

代碼說明:  open-data沒有辦法直接給一個class然后控制類名,但是可以通過控制外部盒子達到控制它本身的大小以及形狀的目的。

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

說明:通過flex布局控制頭像的位置。

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

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

電話咨詢 預約演示 0元開店