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

效果一:

代码如下:

    <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:;
}
.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: 只有当前用户在此群内才能拉取到群名称 示例: 在开发者工具中预览效果

微信小程序 open-data更改样式 open-data 显示头像 圆形的更多相关文章

  1. 微信小程序的布局css样式

    微信小程序的布局css样式width: fit-content;font-size:20px;      /*设置文字字号*/color:red;           /*设置文字颜色*/font-w ...

  2. 微信小程序 JS动态修改样式

    微信小程序这个坑啊,js动态修改样式,我们并不能用js或者jq 轻轻松松一行代码搞定.或者用removeClass addClass 来修改样式. 以下是一种动态修改样式的方法,原理是绑定数据,然后动 ...

  3. 微信小程序中placeholder的样式

    通常,现代浏览器大多支持::placeholder选择器,用于设置placeholder的样式,但是在微信小程序中并不支持这种方式,而是提供了一个专门的属性(placeholder-class)来处理 ...

  4. 微信小程序,动态改变样式

    小程序目前没有修改样式api,但是可以利用数据绑定实现动态改变样式,可以用view标签模拟page然后改变view标签的样式,以下案例演示了如果改变page背景颜色: <view class=& ...

  5. 微信小程序wxml和wxss样式

    对于css不熟悉的android程序员来说,开发微信小程序面临的一个比较困难的问题就是界面的排版了.微信小程序的排版就跟wxml和wxss有关了,它们两者相当于android的布局文件,其中wxml指 ...

  6. 关于微信小程序更新内容后手机上不能及时显示的办法

    这几天一直在做微信小程序的二次开发,每天都要发布程序,但是发布之后微信上查看小程序和以前的一模一样,丝毫没有改变,但是我再本地上却改变了,而且没有开的不校验合法域名那个.这是为啥呢????? 这是跟小 ...

  7. 微信小程序button选中改样式-实现单选/多选

    小程序实现多button单选/多选 红色为选中状态 单选 多选 ①wxss /* pages/button-select/button-select.wxss */ .button_container ...

  8. 微信小程序去除Button默认样式

    在小程序开发过程中,使用率蛮高的组件button,因为经常要去除默认样式,然后再自定义样式,所以经常写,自己也总结分享一下简单的实现步骤. (一)实现效果1.实现前(默认样式): 2.实现后(去除默认 ...

  9. WebStorm 配置微信小程序开发 用html样式打开wxml 用css样式打开wxss 配置微信小程序提醒

    1.点开preferences 2.搜索找到“File Types” 3.找到"HTML",点击“+”按钮,添加“*.wxml”然后“apply” 4.和3一样,再找到 ‘casc ...

  10. 微信小程序覆盖自定义组件样式

    小程序官方文档明确指出,引入的第三方自定义组件,是不可以对其进行CSS样式覆盖的,但是我们还想要修改怎么办呢?自定义组件时会之定义个外部类,通过这个外部类来修改样式. 修改https://weapp. ...

随机推荐

  1. MQTT控制---subscribe

    连接服务端 客户端向服务端发送SUBSCRIBE报文用于创建一个或多个订阅. 固定报头 报头长度:2 Bytes 1.报头控制类型(0x82) 报文SUBSCRIBE控制报固定报头的第3.2.1.0位 ...

  2. js圆形头像实现

    定义CSS <style> .to{width:100px;height:100px;border-radius:100px} </style> 这样就实现了 主要是borde ...

  3. mysqldump命令使用

    1.执行mysqldump命令前,先给配制添加帐号和密码: # vi /etc/my.cnf user=root password=XXXXXX 2. # mysqldump -uroot -pXXX ...

  4. eclipse集成maven插件

    一.准备工作 1. 安装jdk并配置:https://www.cnblogs.com/diandiangui/p/10002100.html 2. 已安装好 maven并配置:https://www. ...

  5. Redis实战 - 4.Key

    Redis 键(key) Redis 键命令用于管理 redis 的键. DEL key 该命令用于在 key 存在时删除 key. 127.0.0.1:6379> set w3ckey red ...

  6. ansible的modules

    fetch   :从远端服务器拉取文件到本地 dest 依赖   本地存放拉取到的文件路径, 如果flat=yes,则会在该路径下直接存放文件, 如果flat=no,则会在该路径下生成每个服务器的in ...

  7. JS中的位操作在实际项目中的应用

    前言: Linux中的文件管理子系统的权限管理,想必大家都知道:rwx分别代表read(可读),write(可写), execute(可执行,如果是可执行程序的话),其中rxw可以按照数字表示: r  ...

  8. Database Change Notification

    使用java监控oracle数据库的变化,主要是针对表数据,如果发生变化,使用select去查询,能够达到推送的目的 package com.test.notifi; import java.sql. ...

  9. 使用Nginx反向代理和内容替换模块实现网页内容动态替换功能

    2016年11月21日 10:30:00 xian_02 阅读数:10943   Nginx是一款轻量级高性能服务器软件,虽然轻量,但功能非常强大,可用于提供WEB服务.反向代理.负载均衡.缓存服务. ...

  10. JS ArrayBuffer和String

    http://blog.mn886.net/chenjianhua/show/6b02fa4173ed/index.html ArrayBuffer和String 互相转换 function str2 ...