首先说明一下这个组件不能直接写样式，需要外面套一层view
<view class='avatar'>
<open-data type='userAvatarUrl'></open-data>
</view>
随后这个东西光写border-radius: 50%;不管用，带上边框的话能看到图片是盖在边框上的，也就是说view的属性本身都是好用的，只是显示头像的图片没被view约束住，上网百度了一下，有些解决方案是做一个遮罩，罩在图片上实现圆角，感觉不是很优雅，最后找到一个解决方案，只需要加一句话就好了overflow: hidden;
就像这样：
.avatar{
width: 20vw;
height: 20vw;
border-radius: 50%;
overflow: hidden;
}
小程序之open-data userAvatarUrl头像做圆角http://www.okeydown.com/h...
首先说明一下这个组件不能直接写样式，需要外面套一层view 随后这个东西光写border-radius: 50%;...
微信小程序的 open-data 组件可以在用户未登录时获取用户 头像、昵称、性别等信息。 那怎么使用 open-...
小程序可以在没有授权时是可以获取微信头像的信息显示的，即通过open-data获取显示，头像的type为userA...
1.实现圆角头像 方式一：CircleAvatar 方式二：ClipOval ClipOval也可以实现圆角头像，...
按照下面的代码封装完轮播组件后，在微信小程序模拟器中可以实现圆角效果，But运行到真机上，圆角效果没了！！！ 轮播...
1.如果只是展示用户头像昵称，可以使用
如果只是展示用户头像昵称,可以使用open-data组件 微信接口登录文档 获取用户信息方法文档 当需要使用 bu...
微信小程序中的open-data属性可以展示微信用户的开放性信息，如头像、性别等。头像默认为矩形，如果开发者想修改...
open-data 组件并不是真正的节点，直接应用样式没什么效果。比如调用userAvatarUrl 获得的头像，...
本文标题：open-data组件当头像用实现圆角(小程序)
本文链接：https://www.haomeiwen.com/subject/udqqeqtx.html
网友评论