阅读 5445

小程序之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; 把溢出部分隐藏就可以了

感谢提醒,如有哪里需要改进的 多多指教

文章分类
前端