福州网站建设>网站新闻>福州微信小程序

微信小程序open-data userAvatarUrl圆角显示

发布日期:2019-10-02浏览次数:605 来源:福州网站建设

微信小程序获取用户头像有两种方式:


一种是通过调用wx.getUserInfo方法,从userInfo字段中解析出avatarUrl。


另一种是通过open-data组件,直接将用户头像显示在页面指定位置。



针对第二种方法,无法使用border-radius:50%来设置头像圆角,需要使用clip-path: circle(50rpx at center);进行四周的剪裁,具体代码示例如下:



 
.avatar{
  width: 100rpx;
  height: 100rpx;
  clip-path: circle(50rpx at center);
}
 


注:


1. open-data组件依赖的小程序基础库版本号最低为1.9.90


2. clip-path CSS 属性可以对元素的部分区域进行裁剪(隐藏)。


 


 


 


--------------------------------------------------------------------------------------------------


5.8修改


针对属性border-radius:50%,实际也可以奏效,需要配合overflow:hidden来使用,完整代码:



 
.avatar{
  width: 100rpx;
  height: 100rpx;
  overflow:hidden;  
  border-radius: 50%; 
}
 

以上是由福州网站建设的小编为你分享了"微信小程序open-data userAvatarUrl圆角显示"文章,如果你在这方面有什么问题,随时联系我们

福州微信小程序有关的文章
如果您有什么问题,欢迎咨询我们客服! 点击QQ咨询