小程序开放数据之userAvatarUrl怎么做成圆角

这是站长遇到的一个问题,大家都知道小程序可以在没有授权时是可以获取微信头像的信息显示的,即通过open-data获取显示,头像的type为userAvatarUrl。

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

这是我们会发现我们虽然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: 200rpx;
      width: 200rpx;
      border-radius: 50%;
      border: 40rpx solid #fff;
  }
  .headView .icontwo {
    position: absolute;
    height: 200rpx;
    width: 200rpx;
    border-radius: 50%;
    border: 10rpx solid #f1f1f1;
}

//wxml
<view class=’headView’>
<open-data class=’icon’ mode=”aspectFit” type=”userAvatarUrl”></open-data>
<view class=’icontwo’></view>
</view>

【小程序源码网资源版权风险说明】:
本站为避免不必要的纷争,分享的所有资源中一切可能有版权风险的资源将全部转载自第三方网站或平台,站长只为大家提供相关资源的介绍和跳转引导。 因可能有疏忽大意,所以如有遗漏资源侵犯了您的合法权利,请联系站长删除。
【小程序源码网资源下载使用说明】:
本站所分享的一切QQ小程序源码,thinkphp整站源码,微信小程序源码,图文教程等资源仅供用户学习参考使用,任何人不得作其他用途,违者自行承担所有责任。
【小程序源码网毫无人看的介绍】:
本站又称Z站,原名贼娘网,开站于2018年,换过三任站长,目前站长是第四任站长,本站是一个主要分享免费开源小程序源码/网站源码/免费素材/教程资源的网站,主要小程序资源有用于学习的小程序源码,也有正版原创可商用的小程序源码,是一个公益博客型网站。
【小程序源码网原创源码版权申明】:
未经小程序源码网许可,任何人不得擅自使用本站原创首发源码进行商业行为(除本站VIP用户在期限内,版权无使用限制),否则将依法承担相应赔偿责任。
【小程序源码网转载文章版权申明】:
本站所转载的QQ小程序或微信小程序源码与其他资源仅供学习,任何人不得作其他用途,违者自行承担所有责任。
【小程序源码网站长最后的屁话】:
如有您认为本站有任何侵犯您合法权益的文章,或者您有什么疑问需求,欢迎联系站长QQ,站长24小时在线,备注公司名称和源码版权问题或者需要小程序定制开发等站长业务类型可急速处理,如果您只是交流小程序的一些开发问题或源码问题可以加入QQ群讨论,就不用加站长啦,对于白嫖党,QQ群才是处理问题的天堂,当然站长也欢迎大家骚扰~
小程序源码网 » 小程序开放数据之userAvatarUrl怎么做成圆角

发表评论

嘿,投喂下嘛!