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

小程序能够在没有受权时是能够获取微信头像的信息显示的，即经过open-data获取显示，头像的type为userAvatarUrl。

//头像显示的写法
<open-data type='userAvatarUrl'></open-data>
复制代码

接下来咱们会给头像加个布局class和mode,那么代码就会变成这样：

//添加class、mode
<open-data class='icon' mode='aspectFit' type='userAvatarUrl'></open-data>

复制代码

.headView .icon {
    height: 180rpx;
    width: 180rpx;
    border-radius: 50%;
}
复制代码

这是咱们会发现咱们虽然class里有作圆角，但是没有起做用：

因此咱们获得结论：小程序open-data中的头像，咱们是不能对其作圆角之类的处理。

那么，咱们怎样才能作到在没有获取受权时 拿用户头像显示 并作圆角呢？

目标效果：

下面就是个人处理方式：

1. 实现逻辑：头像作绝对布局，并在其上面覆盖一个中间镂空的view设置view的边界足够遮挡住头像非圆形部分，且镂空view边界颜色须要跟周围背景颜色同样，这样就实现了伪圆角。

2. 实现代码：

wxss:

.headView {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50rpx;
    height: 300rpx;
    width: 750rpx;
    position: relative;
}
/**
*open-data 的头像作不了圆角
*这里是覆盖一个镂空的view在上面 镂空view的边界作成与周围背景颜色同样 作了伪圆角
**/
.headView .icon {
    position: absolute;
    height: 180rpx;
    width: 180rpx;
    border-radius: 50%;
    border: 50rpx solid #f1f1f1;
}
复制代码

wxml:

<view class='headView'>
    <open-data class='icon' mode='aspectFit' type='userAvatarUrl'></open-data>
    <view class='icon'/>
</view>
复制代码

这样就大致实现了！

有些人实现效果多是这样：

这种状况要改为跟目标效果同样只须要调整一下view的边界宽度和边界颜色就能够了：

优化

感谢读者的提醒，因为本人基础进阶阶段以及以前实现时考虑不够，上面的实现方式把问题复杂化了。

代码优化以下：

<open-data class='icon' mode='aspectFit' type='userAvatarUrl'></open-data>

复制代码

.headView .icon {
    height: 180rpx;
    width: 180rpx;
    border-radius: 50%;
    overflow：hidden;//只须要添加这句 把溢出部分隐藏就能够了
}
复制代码

只须要添加这句 overflow：hidden; 把溢出部分隐藏就能够了

感谢提醒，若有哪里须要改进的 多多指教