码迷,mamicode.com
首页 > 微信 > 详细

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

时间:2018-08-13 12:08:29      阅读:174      评论:0      收藏:0      [点我收藏+]

标签:mod   曲线   size   cap   nal   overflow   通过   使用   spl   

用户个人页面

 

技术分享图片

 

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

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效果

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

标签:mod   曲线   size   cap   nal   overflow   通过   使用   spl   

原文地址:https://www.cnblogs.com/jile/p/9466937.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!