更新记录

1.0.0(2019-08-14)

更新日期:2019-08-14 版本:1.0.0


flex栅格布局

参数

row.vue参数

  • align:对齐方式,可选值flex-start (默认)| flex-end | center | space-between | space-around;
  • retract:添加行时可选择前缩进百分百(值为0-100)例如50行前缩进50%

col.vue参数

  • span:每一列宽占整个屏的百分比(值为0-100)例如50标识占屏幕的50%

使用

下载后把lml-layout文件夹里row.vue和col.vue 放入项目中可自定义位置

  • 在页面中导入row.vue和col.vue。也可在mian.js导入

    import vrow from '../../../common/layout/row.vue'
    import vcol from '../../../common/layout/col.vue'

  • 页面使用

  • <template>
    <view>
    <vrow class="row" >
        <vcol span="50"><view class="col"> 50% </view></vcol>
        <vcol span="50">
            <vrow class="row" >
                <vcol span="25"><view class="col"> 嵌套25%</view></vcol>
                <vcol span="25"><view class="col"> 嵌套25%</view></vcol>                  
            </vrow>
        </vcol>
    </vrow>
    <vrow class="row" :retract="20" >
        <vcol span="40"><view class="col">前20%、后40%</view></vcol>
        <vcol span="40"><view class="col">40%</view></vcol>
    </vrow>
    <vrow class="row" :align="'center'">
        <vcol span="75"><view class="col"> 居中75% </view></vcol>         
    </vrow>
    <vrow class="row" :align="'flex-end'">
        <vcol span="30" ><view class="col"> 右对齐30% </view></vcol>           
        <vcol span="40" ><view class="col"> 右对齐40% </view></vcol>           
    </vrow>
    <vrow class="row" :align="'space-between'">
        <vcol span="40" ><view class="col"> 两端对齐40% </view></vcol>          
        <vcol span="40" ><view class="col"> 两端对齐40% </view></vcol>          
    </vrow>
    <vrow class="row" :align="'space-around'">
        <vcol span="20" ><view class="col"> 等距20% </view></vcol>            
        <vcol span="20" ><view class="col"> 等距20% </view></vcol>            
        <vcol span="20" ><view class="col"> 等距20% </view></vcol>            
        <vcol span="20" ><view class="col"> 等距20% </view></vcol>            
    </vrow>
    </view>
    </template>
    
    import vrow from '../../../common/layout/row.vue'     //导入组件
    import vcol from '../../../common/layout/col.vue'  
    export default {
    components: {
        vrow,vcol
    },
    data() {
        return {                
        }
    },
    methods: {          
    }
    }
    
    <style>   
    .row{     
    background: #BBBBBB; 
    }
    .col{             
    display: flex;
    justify-content: center;        
    flex-wrap: wrap;
    background: #2C405A;
    border-radius: 20upx;
    color: #FBBD08;
    font-size: 30upx; 
    line-height: 100upx;
    margin-top: 20upx;
    }
    </style>

代码不难,但是还挺实用的

隐私、权限及商业化声明

1. 本插件需要申请的手机端权限列表:

2. 本插件采集的手机端数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问