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

微信小程序open-data更改头像显示样式有两种效果，下面为大家介绍微信小程序open-data更改头像的开发实例。

 

效果一：

代码如下：

 

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'>关注</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样式更改的总结，希望我的文章能够帮助到你！