微信

微信小程序实现常见的user效果

云博小周宇1 Min Read

用户个人页面

 

技术分享图片

 

为了便于以后的使用，所以把这个效果记录下来，以后直接复制粘贴本篇的代码。

wxml

<view class=‘circle‘> <view class=‘userAvatar‘> <open-data type="userAvatarUrl" ></open-data> </view> </view>

 

代码说明：


open-data没有办法直接给一个class然后控制类名，但是可以通过控制外部盒子达到控制它本身的大小以及形状的目的。

 

wxss

circle{ width:930rpx; height:930rpx; border-radius:465rpx; background-color:#2ca6cb; margin-top:-666rpx; margin-left:-90rpx; display:flex; align-items:center; flex-direction:column-reverse; } .userAvatar{ width:80px; height:80px; border-radius:40px; margin-bottom:-30px; overflow: hidden; }

说明：通过flex布局控制头像的位置。

 

作者：王月_92f2 


链接：

 

相关文章：

小程序二次贝塞尔曲线，购物车商品曲线飞入效果

微信小程序 – toptip效果