微信小程序?qū)崿F(xiàn)常見(jiàn)的user效果
發(fā)布時(shí)間：2018-08-13 11:11 所屬欄目：小程序開(kāi)發(fā)教程
用戶個(gè)人頁(yè)面為了便于以后的使用，所以把這個(gè)效果記錄下來(lái)，以后直接復(fù)制粘貼本篇的代碼。wxmlview class='circle' view class='userAvatar' open-data type="userAvatarUrl" /open-data /view /view代碼說(shuō)明：open- ...
用戶個(gè)人頁(yè)面
為了便于以后的使用，所以把這個(gè)效果記錄下來(lái)，以后直接復(fù)制粘貼本篇的代碼。
wxml
-
<view class='circle'> <view class='userAvatar'> <open-data type="userAvatarUrl" ></open-data> </view> </view>
代碼說(shuō)明： open-data沒(méi)有辦法直接給一個(gè)class然后控制類名，但是可以通過(guò)控制外部盒子達(dá)到控制它本身的大小以及形狀的目的。
wxss
-
.circle{ width:930rpx; height:930rpx; border-radius:465rpx; background-color:#2ca6cb; margin-top:-666rpx; margin-left:-90rpx; display:flex; align-items:center; flex-direction:column-reverse; } .userAvatar{ width:80px; height:80px; border-radius:40px; margin-bottom:-30px; overflow: hidden; }
易優(yōu)小程序（企業(yè)版）+靈活api+前后代碼開(kāi)源
碼云倉(cāng)庫(kù):
本文地址：http://m.chqfk.com/wxmini/doc/course/24712.html 復(fù)制鏈接
如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢： 點(diǎn)擊咨詢
