用戶個人頁面為了便于以后的使用,所以把這個效果記錄下來,以后直接復制粘貼本篇的代碼。wxmlview class='circle' view class='userAvatar' open-data type="userAvatarUrl" /open-data /view /view代碼說明:open- ...
用戶個人頁面

為了便于以后的使用,所以把這個效果記錄下來,以后直接復制粘貼本篇的代碼。
<view class='circle'> <view class='userAvatar'> <open-data type="userAvatarUrl" ></open-data> </view> </view> |
代碼說明: open-data沒有辦法直接給一個class然后控制類名,但是可以通過控制外部盒子達到控制它本身的大小以及形狀的目的。
.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;
}
|