您当前的位置: 首页 > 解决方案

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

  • 作者: admin
  • 发布于 2018-08-13 13:41:32
  • 来源:  
  • 栏目:解决方案

导语: 用户个人页面 为了便于以后的使用,所以把这个效果记录下来,以后直接复制粘贴本篇的代码。

 

用户个人页面 

04.jpg

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

 

wxml

 
  1. <view class='circle'>
  2. <view class='userAvatar'>
  3. <open-data type="userAvatarUrl" ></open-data>
  4. </view>
  5. </view>

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

 

wxss

 
  1. .circle{
  2. width:930rpx;
  3. height:930rpx;
  4. border-radius:465rpx;
  5. background-color:#2ca6cb;
  6. margin-top:-666rpx;
  7. margin-left:-90rpx;
  8. display:flex;
  9. align-items:center;
  10. flex-direction:column-reverse;
  11. }
  12. .userAvatar{
  13. width:80px;
  14. height:80px;
  15. border-radius:40px;
  16. margin-bottom:-30px;
  17. overflow: hidden;
  18. }

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



温馨提示:这篇文章没有解决您的问题?欢迎添加微信:18948083295,有微信小程序专业人员,保证有问必答。转载本站文章请注明转自http://www.okeydown.com/(微信小程序网)。

  • 微信扫描二维码关注官方微信
  • ▲长按图片识别二维码
关注我们

微信小程序官方微信

栏目最新
栏目推荐
返回顶部