商城系統(tǒng) 注冊

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

2018-06-19|HiShop
導(dǎo)讀:微信小程序open-data更改頭像顯示樣式有兩種效果,下面為大家介紹微信小程序open-data更改頭像的開發(fā)實例。...

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

 

效果一:

微信小程序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'>關(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. }

效果二:

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


  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é),希望我的文章能夠幫助到你!

電話咨詢 預(yù)約演示 0元開店