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

近日公司项目用获取用户手机号码授权登录，然后又需要获取用户头像，所以想到不经过用户授权登录，通过open-data的type为userAvatarUrl属性就可以获取到用户头像，type为userNickName可以获取用户昵称，详情请参考官方文档

<open-data type="userAvatarUrl" ></open-data>

问题又来了，不能直接对其设置圆角，依然是正方形

.open-data-class{
  width: 150rpx;
  height: 150rpx;
  border-radius: 50%;
}

因为大众审美都是以圆形为主，所以这就需要我们作一个伪圆角，本质还是正方形的，只不过被隐藏了，代码如下：

.open-data-class{
  display: block;
  width: 150rpx;
  height: 150rpx;
  overflow: hidden;
  border-radius: 50%;
}

好了，代码到此为止，希望对你有帮助，如有差错请多多指教！