当前位置:微信小程序开发 > 小程序资讯 > 小程序开发教程 > 微信小程序实现常见的user效果

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

2018-08-16 17:32 来源: 霸界科技

摘要:在开发一个微信小程序过程中,如果要实现常见的user效果,应该如何开发微信小程序呢。...

期权保本理财
  在开发一个微信小程序过程中,如果要实现常见的user效果,应该如何开发微信小程序呢。
 
微信小程序实现常见的user效果
 
  微信小程序实现常见的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布局控制头像的位置。
分享到:
最新评论

网友:

验证码: 点击我更换图片

联系我们

业务咨询:15918761088

招商咨询:15918761088(微信同号)

周一至周五 9:30-18:30

公司地址:广州市海珠区昌岗中路166号富盈国际大厦2505室

官方微信 官方微博

Copyright © 2018 www.keji168.com 广州霸界网络科技有限公司版权所有 粤ICP备18083764号-1

客服
套餐咨询,合作细节等
在线客服
电话咨询
159-1876-1088