微信小程序如何使用open-data更改頭像顯示樣式

這篇文章主要介紹微信小程序如何使用open-data更改頭像顯示樣式，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

代碼如下：

1. <view class='zhubo'>

2. <view class='zhuboLeft'>

3. <view class='zhubo-avater'>

4. <image class='zhuboIcon' src='../../image/video-list/avater.jpg'></image>

5. </view>

6. <view class='zhuboDes'>

7. <view class='zhubo-name'>東辰-寒冰</view>

8. <view class='zhubo-from'>來自虎牙直播</view>

9. </view>

10. </view>

11. <view class='zhubo-Right'>關(guān)注</view>

12. </view>

1. /*主播信息 */

2. .zhubo{

3. margin: 0 28rpx 0;

4. height: 144rpx;

5. display:flex;

6. justify-content:space-between;

7. align-items: center;

8. }

9. .zhuboIcon{

10. width:80rpx;

11. height: 80rpx;

12. border-radius: 50%;

13. overflow: hidden;

14. }

15. .zhuboLeft{

16. display: flex;

17. }

18. .zhubo-avater{

19. padding-right: 20rpx;

20. display: flex;

21. align-items: center;

22. }

23. .zhubo-name{

24. font-weight: 700;

25. }

26. .zhubo-from{

27. color: #A6A6A6;

28. }

效果二：

1. <view class="userinfo">

2. <view class="userinfo-avatar">

3. <open-data type="userAvatarUrl"></open-data>

4. </view>

5. <open-data type="userNickName"></open-data>

6. </view>

1. .userinfo {

2. position: relative;

3. width: 750rpx;

4. height: 320rpx;

5. color: #fff;

6. display: flex;

7. flex-direction: column;

8. align-items: center;

9. }

10.  

11. .userinfo-avatar {

12. overflow:hidden;

13. display: block;

14. width: 160rpx;

15. height: 160rpx;

16. margin: 20rpx;

17. margin-top: 50rpx;

18. border-radius: 50%;

19. border: 2px solid #fff;

20. box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);

21. }

22.  

23. .userinfo{

24. /* color: #fff; */

25. font-size: 14px;

26. background-color: #c0c0c0;

27. border-radius:40%;

28. }

以上是“微信小程序如何使用open-data更改頭像顯示樣式”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！