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

微信小程序open-data更改頭像顯示樣式有兩種效果，下面為大家介紹微信小程序open-data更改頭像的開發(fā)實例。

效果一：

代碼如下：

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樣式更改的總結(jié)，希望我的文章能夠幫助到你！