微信小程序opendata更改头像显示样式

发布时间：2023-08-03 20:03:52 作者：tangquan51 阅读量：4205

微信小程序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样式更改的总结，希望我的文章能够帮助到你！

我要评论

网友评论

评论时间：2024-04-15 04:54:02

app软件定制开发 13如何将网站封装成app

回复

回复 

评论时间：2023-11-19 04:27:02

·拥有海量资源安卓app开发 专门app定制开发 有海量资源

回复

回复 

置顶通知！发帖请务必遵守法律法规

微信支付下载对账单开发CloudPay.downloadBill()

wx.navigateBack(OBJECT),小程序关闭当前页面返回上一页面（1）

如何制作微信小游戏

微信支付查询退款开发CloudPay.queryRefund()

微信小程序尺寸及外边距设置调整技巧

考古APP开发 感受历史的魅力考古APP开发

安全教育app开发解决方案

门店小程序类目资质表

广州APP开发企业APP制作公司

一招告诉你小程序码怎么生成？

一文告诉你为什么鲜花店老板主动要做小程序?

明星开发个人APP同时打压着那些中小开发团队

看看女性们都在用啥APP软件

国内儿童类APP开发市场怎么样？

餐饮行业APP软件能给企业带来什么样的收益？

三大原因诱发餐饮APP爆发

手机APP推广免费投放技巧

本地头条新闻APP开发:不用编程,让你一个人顶一个电视台

广州APP开发未来的发展趋势

剖析APP开发跨平台与非跨平台对比

税务app开发 办税无压力税务app开发

微信小程序的制作流程

「体育行业app开发」体育行业app开发谁好？案例跟商业模式