微信小程序实现常见的user效果
2018-08-16|HiShop
导读:在开发一个微信小程序过程中,如果要实现常见的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布局控制头像的位置。
以上就是微信小程序实现常见的user效果的开发文档,更多小程序开发文档可以关注网站。
HiShop小程序工具提供多类型商城/门店小程序制作,可视化编辑 1秒生成5步上线。通过拖拽、拼接模块布局小程序商城页面,所看即所得,只需要美工就能做出精美商城。更多小程序请查看:小程序商店