热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

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

废话不多说,直接看效果:效果一:代码如下:<view><view>

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

效果一:

代码如下:

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


推荐阅读
  • 在软件开发过程中,经常需要将多个项目或模块进行集成和调试,尤其是当项目依赖于第三方开源库(如Cordova、CocoaPods)时。本文介绍了如何在Xcode中高效地进行多项目联合调试,分享了一些实用的技巧和最佳实践,帮助开发者解决常见的调试难题,提高开发效率。 ... [详细]
  • iOS snow animation
    CTSnowAnimationView.hCTMyCtripCreatedbyalexon1614.Copyright©2016年ctrip.Allrightsreserved.# ... [详细]
  • 2020年9月15日,Oracle正式发布了最新的JDK 15版本。本次更新带来了许多新特性,包括隐藏类、EdDSA签名算法、模式匹配、记录类、封闭类和文本块等。 ... [详细]
  • 三角测量计算三维坐标的代码_双目三维重建——层次化重建思考
    双目三维重建——层次化重建思考FesianXu2020.7.22atANTFINANCIALintern前言本文是笔者阅读[1]第10章内容的笔记,本文从宏观的角度阐 ... [详细]
  • 如果应用程序经常播放密集、急促而又短暂的音效(如游戏音效)那么使用MediaPlayer显得有些不太适合了。因为MediaPlayer存在如下缺点:1)延时时间较长,且资源占用率高 ... [详细]
  • com.sun.javadoc.PackageDoc.exceptions()方法的使用及代码示例 ... [详细]
  • 微信小程序详解:概念、功能与优势
    微信公众平台近期向200位开发者发送了小程序的内测邀请。许多人对微信小程序的概念还不是很清楚。本文将详细介绍微信小程序的定义、功能及其独特优势。 ... [详细]
  • 本文详细介绍了 PHP 中对象的生命周期、内存管理和魔术方法的使用,包括对象的自动销毁、析构函数的作用以及各种魔术方法的具体应用场景。 ... [详细]
  • MySQL Decimal 类型的最大值解析及其在数据处理中的应用艺术
    在关系型数据库中,表的设计与SQL语句的编写对性能的影响至关重要,甚至可占到90%以上。本文将重点探讨MySQL中Decimal类型的最大值及其在数据处理中的应用技巧,通过实例分析和优化建议,帮助读者深入理解并掌握这一重要知识点。 ... [详细]
  • 在处理大规模数据数组时,优化分页组件对于提高页面加载速度和用户体验至关重要。本文探讨了如何通过高效的分页策略,减少数据渲染的负担,提升应用性能。具体方法包括懒加载、虚拟滚动和数据预取等技术,这些技术能够显著降低内存占用和提升响应速度。通过实际案例分析,展示了这些优化措施的有效性和可行性。 ... [详细]
  • 【问题】在Android开发中,当为EditText添加TextWatcher并实现onTextChanged方法时,会遇到一个问题:即使只对EditText进行一次修改(例如使用删除键删除一个字符),该方法也会被频繁触发。这不仅影响性能,还可能导致逻辑错误。本文将探讨这一问题的原因,并提供有效的解决方案,包括使用Handler或计时器来限制方法的调用频率,以及通过自定义TextWatcher来优化事件处理,从而提高应用的稳定性和用户体验。 ... [详细]
  • 如何使用 `org.apache.poi.openxml4j.opc.PackagePart` 类中的 `loadRelationships()` 方法及其代码示例详解 ... [详细]
  • 深入解析 Android 中 EditText 的 getLayoutParams 方法及其代码应用实例 ... [详细]
  • 本文探讨了 Java 中 Pair 类的历史与现状。虽然 Java 标准库中没有内置的 Pair 类,但社区和第三方库提供了多种实现方式,如 Apache Commons 的 Pair 类和 JavaFX 的 javafx.util.Pair 类。这些实现为需要处理成对数据的开发者提供了便利。此外,文章还讨论了为何标准库未包含 Pair 类的原因,以及在现代 Java 开发中使用 Pair 类的最佳实践。 ... [详细]
  • 本文介绍了RPC框架Thrift的安装环境变量配置与第一个实例,讲解了RPC的概念以及如何解决跨语言、c++客户端、web服务端、远程调用等需求。Thrift开发方便上手快,性能和稳定性也不错,适合初学者学习和使用。 ... [详细]
author-avatar
吖鸟集团总公司
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有