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

发布时间：2023-08-07 07:52:03 作者：xdsimon 阅读量：5858

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

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

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

以上就是微信小程序实现常见的user效果的开发文档，更多小程序开发文档可以关注网站。

多程序小程序工具提供多类型商城/门店小程序制作，可视化编辑 1秒生成5步上线。通过拖拽、拼接模块布局小程序商城页面，所看即所得，只需要美工就能做出精美商城。更多小程序请查看：小程序商店

我要评论

置顶通知！发帖请务必遵守法律法规

微信支付下载对账单开发CloudPay.downloadBill()

wx.navigateBack(OBJECT),小程序关闭当前页面返回上一页面（1）

如何制作微信小游戏

微信支付查询退款开发CloudPay.queryRefund()

微信小程序尺寸及外边距设置调整技巧

考古APP开发 感受历史的魅力考古APP开发

安全教育app开发解决方案

门店小程序类目资质表

广州APP开发企业APP制作公司

一招告诉你小程序码怎么生成？

一文告诉你为什么鲜花店老板主动要做小程序?

新闻app开发,我们为您量身定做阅读app

企业都希望用移动应用来实现移动办公

app开发公司销售员工的辛酸app开发公司销售员工的辛酸

美容美发APP开发7大功能

教育类APP-广州教育类APP开发公司

5大在线旅游行业APP开发模式

本地头条新闻APP开发:不用编程,让你一个人顶一个电视台

广州APP开发未来的发展趋势

剖析APP开发跨平台与非跨平台对比

税务app开发 办税无压力税务app开发

微信小程序的制作流程

「体育行业app开发」体育行业app开发谁好？案例跟商业模式