怎么用open-data 制作圆角头像

微信小程序的 open-data 组件可以在用户未登录时获取用户 头像、昵称、性别等信息。

那怎么使用 open-data 制作一个圆角头像呢?

wxml 文件:

获取用户头像的语法: <open-data type="userAvatarUrl"></open-data>

由于 open-data 组件本身无法设置样式，因此样式需在外层的 view 设置

.user-header-wrapper .user-profile-wrapper{

width: 50px;

height: 50px;

border-radius: 50%;}

我们知道border-radius 可以设置视图边框的弧度，可是这样设置了以后，头像还是正方形的，为什么呢?

原来还要设置 overflow:hidden;， 正确的写法是

.user-header-wrapper .user-profile-wrapper{

width:50px;

height:50px;

border-radius:50%;

overflow:hidden;}

这样就有了圆角头像的效果了。

参考资料:

1. 有关CSS的overflow和border-radius的那些事，你的圆角被覆盖了吗？

2.open-data 官方文档: https://developers.weixin.qq.com/miniprogram/dev/component/open-data.html

华电AI程

微信cqjnryj 欢迎交流