微信小程序：open-data更改样式 open-data 显示头像 圆形

 

效果：

 

wxml：

<!-- 头像昵称begin --> <view class='mytop-box'> <view class="mytop-avatar"> <open-data type="userAvatarUrl"></open-data> </view> <view class='mytop-username'> <open-data type="userNickName"></open-data> </view> </view> <!-- 头像昵称end -->

wxss:

.mytop-box{ display: flex; width: 100%; height: 100%; align-items: center; flex-direction:column; justify-content: center; } .mytop-avatar{ overflow:hidden; width: 130rpx; height: 130rpx; left: 50%; border-radius: 50%; box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2); } .mytop-username{ font-size: 35rpx; font-family: SourceHanSansCN-Medium; color: #000000; margin-top: 10rpx; }