微信小程序 open-data头像圆形展示

最新推荐文章于 2025-08-17 02:33:44 发布

原创最新推荐文章于 2025-08-17 02:33:44 发布 · 298 阅读

0 ·

CC 4.0 BY-SA版权

微信小程序专栏收录该内容

18 篇文章

订阅专栏

本文介绍如何为外套view标签设置CSS样式，并使用了overflow:hidden属性来实现特定的效果。示例代码展示了如何在一个圆形的view标签中加载用户头像。

外套view标签写css样式，样式中要有overflow-hidden
例如：

  <view style="width:30px;height:30px;border-radius:50%;overflow:hidden">
    <open-data type="userAvatarUrl"></open-data>
  </view>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

aiqqvb

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

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

Dove言和

05-22

6183

废话不多说，直接看效果：效果一：代码如下： <view class='zhubo'> <view class='zhuboLeft'> <view class='zhubo-avater'> <image class='zhuboIcon' src='../../image/video-lis...

微信小程序--用户头像做成圆形

weixin_44531304的博客

04-03

1725

–wxml– <view class="logo"> <open-data type="userAvatarUrl" class="userinfo" id="userinfo"></open-data> </view> –wxss– #userinfo{ width: 185rpx; height:185rpx; border...

参与评论您还未登录，请先登录后发表或查看评论

小程序open-data的圆形用户头像实现

祈澈菇凉

10-29

1277

wxml <view class="page-body-info "> <open-data type='userAvatarUrl' class="userinfo" mode="cover"></open-data> <open-data type="userNickName&qu

微信小程序--open-data获取用户头像实现头像圆角

张新丁

03-11

1869

index.wxml: <view class="userinfo-avatar"> <open-data type="userAvatarUrl"></open-data> </view> wxss: .userinfo-avatar { text-align: center; margin: 0 auto; overf...

微信小程序展示当前用户头像

山有木兮木有枝心悦君兮君不知

05-06

1591

<open-data type="userAvatarUrl" default-avatar="'/images/my/defalut.png'"></open-data> 效果图如下：

微信小程序获取用户头像并显示出来，很简单一行代码搞定！

海贼王某人的博客

08-13

7697

<open-data type="userAvatarUrl"></open-data> 小程序提供的组件，可以自己获取用户头像并显示出来：效果图如下：

微信小程序--使用open-data获取用户头像（显示为圆形）

海到无边天作岸山登绝顶我为峰

05-29

5569

场景描述利用微信小程序组件中开发能力的open-data获取用户图像，然后图片显示为圆形头像【默认是方形】解决方法在open-data外面套一个view组件，编写class样式即可。注意： class不可以写在open-data中，没有任何效果。 wxss中必须含有： overflow: hidden; // wxml <view class="x"> <open-data type

精选资源

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

03-29

废话不多说，直接看效果： (此图片来源于网络，如有侵权，请联系删除! ) 效果一：代码如下： <view class='zhubo-avater'> <image class='zhuboIcon' src='../../image/video-list/avater.jpg'> ...

【微信小程序篇-07】小程序的开放能力和项目发布流程

最新发布

m0_59269218的博客

08-17

1770

小程序的开放能力和项目的发布流程

微信小程序前端标签使用Trick：如何使用转义字符、input标签属性、open-data的使用、富文本图片溢出屏幕大小、 navigator不能跳转到tabBar页面

娜娜Cina的博客

12-26

1012

微信小程序前端标签使用Trick：如何使用转义字符、input标签属性、open-data使用、富文本图片内容溢出前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结前言 微信小程序前端会比web增加更多的限制，下面来看几个标签的使用~ 一、pandas是什么？示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。二、使用步骤 1.引入库代码如下（示例）： import numpy as np import pandas as pd import m

open-data头像设置圆角

weixin_37773766的博客

11-14

1550

<view class="userinfo"> <view class="userinfo-avatar"> <open-data type="userAvatarUrl"></open-data> </view> <open-data type="userNi

设置圆形头像

yanglei0917的博客

08-11

706

在上一篇文章http://blog.youkuaiyun.com/yanglei0917/article/details/52180544里，写了一下关于上传头像的问题，但是上传头像默认的都比较丑，现在圆形头像很受欢迎，所以这里学习一下圆形头像的制作，其实圆形头像制作很简单；我们只需要在图片转成Bitmap的时候做一下相应的处理即可： /** * 展示头像 * @param

open-data头像的更改样式

Acitylion的博客

04-13

361

<view class="userInfo" wx:else> <view class="userImg">  <open-data type="userAvatarUrl"></open-data> </view> <open-data type=...

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

qq_36935391的博客

06-02

1135

效果一：代码如下： <view class='zhubo'> <view class='zhuboLeft'> <view class='zhubo-avater'> <image class='zhuboIcon' src='../../image/video-list/avater...

小程序之open-data userAvatarUrl圆角作头像

my_yiren的博客

10-08

1250

近日公司项目用获取用户手机号码授权登录，然后又需要获取用户头像，所以想到不经过用户授权登录，通过open-data的type为userAvatarUrl属性就可以获取到用户头像，type为userNickName可以获取用户昵称，详情请参考官方文档 <open-data type="userAvatarUrl" ></open-data> 问题又来了，不能直接对其设置圆角...

微信小程序之text超出省略号、圆形头像

maktoub的博客

10-11

622

实现微信小程序text标签的超出部分以省略号代替，提供了常用的商品展示页面，同时解决了头像圆形显示的问题

微信小程序open-data组件功能调整

weixin_46767263的博客

01-04

4672

微信小程序<open-data>组件功能调整

微信小程序如何显示用户头像和用户名

qq_41675930的博客

02-01

1768

微信小程序如何获取用户头像和用户名