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

用户个人页面

 

 

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

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布局控制头像的位置。

 

扫描二维码关注公众号，回复： 2836658 查看本文章

作者：王月_92f2
链接：https://www.jianshu.com/p/b2fd8ae61660

 

相关文章：

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

微信小程序 - toptip效果