返回

专注连锁门店会员营销管理系统

线上+线下+进销存+收银+会员
获取验证码
立即登录
HiShop > Hi小程序 > 小程序开发 > 开发实例 >

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

2018-08-16 作者：秩名

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

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

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

wxml



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




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



	wxss




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




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



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



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


		

				

            
线上+线下+进销存+收银+会员门店零售管理好帮手

            
    
                
  • 
                    极速收银管理
                    
    门店能实现快速收银，提升门店经营效率。
    
                
    • 
                
  • 
                    进销存管理
                    
    系统自带进销存管理，更好管理库存销售。
    
                
    • 
                
  • 
                    软硬件一体化
                    
    配备收银硬件一站式整体服务。
    
                
    • 
            

            

                收 银
                会员管理
                库存管理
                商品管理
                交接班
                数据报表
                营销促单
                售后处理
                多种收款
            

            获取报价
        

		
	


	

		
推荐文章

		
	

	
	

	 门店系统
  获取报价
  立即咨询 
免费试用