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

废话不多说,直接看效果:

效果一:

代码如下:

复制代码
    <view class='zhubo'>
      <view class='zhuboLeft'>
        <view class='zhubo-avater'>
          <image class='zhuboIcon' src='../../image/video-list/avater.jpg'></image>
        </view>
        <view class='zhuboDes'>
          <view class='zhubo-name'>东辰-寒冰</view>
          <view class='zhubo-from'>来自虎牙直播</view>
        </view>
      </view>
      <view class='zhubo-Right'>关注</view>
    </view>
复制代码
复制代码
/*主播信息  */
.zhubo{
  margin: 0 28rpx 0;
  height: 144rpx;
  display:flex;
  justify-content:space-between;
  align-items: center;
}
.zhuboIcon{
  width:80rpx;
  height: 80rpx;
  border-radius: 50%;
  overflow: hidden;
}
.zhuboLeft{
  display: flex;
}
.zhubo-avater{
  padding-right: 20rpx;
  display: flex;
  align-items: center;
}
.zhubo-name{
  font-weight: 700;
}
.zhubo-from{
  color: #A6A6A6;
}
复制代码

效果二:

<view class="userinfo">
  <view class="userinfo-avatar">
    <open-data  type="userAvatarUrl"></open-data>
  </view>
    <open-data type="userNickName"></open-data>
</view>
复制代码
.userinfo {  
  position: relative;  
  width: 750rpx;  
  height: 320rpx;  
  color: #fff;  
  display: flex;  
  flex-direction: column;  
  align-items: center;  
}  
  
.userinfo-avatar {  
  overflow:hidden;  
  display: block;  
  width: 160rpx;  
  height: 160rpx;  
  margin: 20rpx;  
  margin-top: 50rpx;  
  border-radius: 50%;  
  border: 2px solid #fff;  
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);  
}  
  
.userinfo{  
  /* color: #fff; */  
  font-size: 14px;  
  background-color: #c0c0c0;  
  border-radius:40%;  
}  
复制代码

 

 以上就是对新组件open-data样式更改的总结,希望我的文章能够帮助到你!

 

open-data 基础库 1.4.0 开始支持,低版本需做兼容处理 用于展示微信开放的数据。 属性名 类型 默认值 说明 type String 开放数据类型 open-gid String 当 type="groupName" 时生效, 群id lang String en 当 type="user*" 时生效,以哪种语言展示 userInfo,有效值有:en, zh_CN, zh_TW type 有效值: 值 说明 最低版本 groupName 拉取群名称 1.4.0 userNickName 用户昵称 1.9.90 userAvatarUrl 用户头像 1.9.90 userGender 用户性别 1.9.90 userCity 用户所在城市 1.9.90 userProvince 用户所在省份 1.9.90 userCountry 用户所在国家 1.9.90 userLanguage 用户的语言 1.9.90 Tips: 只有当前用户在此群内才能拉取到群名称 示例: 在开发者工具中预览效果

 更多学习资料->

posted @   奔跑的太阳花  阅读(35908)  评论(0编辑  收藏  举报
编辑推荐:
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」
点击右上角即可分享
微信分享提示