uView Layout 布局

通过基础的 12 分栏,迅速简便地创建布局

注意

如需实现类似宫格的布局,请使用uView的Grid宫格组件,可以设置角标,功能更完善和灵活

#平台差异说明

App(vue) App(nvue) H5 小程序

#基本使用

通过col组件的span设置需要分栏的比例




copy

#分栏间隔

通过设置row组件的gutter参数,来指定每一栏之间的间隔(最终表现为左边内边距各为gutter/2),默认间隔为0


    
        
            
        
        
            
        
        
            
        
        
            
        
    



copy

#混合布局

通过指定col组件的span属性,指定不同的值,达到不同的比例


    
        
            
        
        
            
        
        
            
        
    



copy

#分栏偏移

通过指定col组件的offset属性可以指定分栏偏移的栏数。


    
        
            
        
        
            
        
    
    
        
            
        
        
            
        
    

copy

#对齐方式

通过row组件的justify来对分栏进行灵活的对齐, 可选值为start(或flex-start)、end(或flex-end)、centeraround(或space-around)、between(或space-between), 其最终的表现类似于css的justify-content属性。

注意:由于持微信小程序编译后的特殊结构,此方式不支持微信小程序。


    
        
            
        
        
            
        
    
    
        
            
        
        
            
        
    

你可能感兴趣的:(vue.js,前端,javascript,微信小程序)