uniApp中uView组件库的丰富布局方法
目录
基本使用
#分栏间隔
#混合布局
#分栏偏移
#对齐方式
API
#Row Props
#Col Props
#Row Events
#Col Events
UniApp的uView组件库是一个丰富的UI组件库，提供了各种常用的UI组件和布局方法，帮助开发者快速构建美观、灵活的界面。下面给你写一篇关于uView组件库的布局方法的博客：
基本使用
通过col组件的span设置需要分栏的比例
<template><view class="u-page"><view class="u-demo-block"><text class="u-demo-block__title">基础使用</text><view class="u-demo-block__content"><u-row customStyle="margin-bottom: 10px"><u-col span="6"><view class="demo-layout bg-purple-light"></view></u-col><u-col span="6"><view class="demo-layout bg-purple"></view></u-col></u-row><u-row customStyle="margin-bottom: 10px"><u-col span="4"><view class="demo-layout bg-purple"></view></u-col><u-col span="4"><view class="demo-layout bg-purple-light"></view></u-col><u-col span="4"><view class="demo-layout bg-purple-dark"></view></u-col></u-row><u-row justify="space-between"><u-col span="3"><view class="demo-layout bg-purple"></view></u-col><u-col span="3"><view class="demo-layout bg-purple-light"></view></u-col><u-col span="3"><view class="demo-layout bg-purple"></view></u-col><u-col span="3"><view class="demo-layout bg-purple-light"></view></u-col></u-row></view></view></view>
</template><style lang="scss">.wrap {padding: 12px;}.demo-layout {height: 25px;border-radius: 4px;}.bg-purple {background: #CED7E1;}.bg-purple-light {background: #e5e9f2;}.bg-purple-dark {background: #99a9bf;}
</style>
#分栏间隔
通过设置row组件的gutter参数，来指定每一栏之间的间隔(最终表现为左边内边距各为gutter/2)，默认间隔为0
<view class="u-demo-block__content"><u-rowjustify="space-between"gutter="10"><u-col span="3"><view class="demo-layout bg-purple"></view></u-col><u-col span="3"><view class="demo-layout bg-purple-light"></view></u-col><u-col span="3"><view class="demo-layout bg-purple"></view></u-col><u-col span="3"><view class="demo-layout bg-purple-light"></view></u-col></u-row>
</view><style lang="scss">.wrap {padding: 12px;}.demo-layout {height: 25px;border-radius: 4px;}.bg-purple {background: #CED7E1;}.bg-purple-light {background: #e5e9f2;}.bg-purple-dark {background: #99a9bf;}
</style>
#混合布局
通过指定col组件的span属性，指定不同的值，达到不同的比例
<view class="u-demo-block__content"><u-rowjustify="space-between"gutter="10"><u-col span="2"><view class="demo-layout bg-purple-light"></view></u-col><u-col span="4"><view class="demo-layout bg-purple"></view></u-col><u-col span="6"><view class="demo-layout bg-purple-dark"></view></u-col></u-row>
</view><style lang="scss">.wrap {padding: 12px;}.demo-layout {height: 25px;border-radius: 4px;}.bg-purple {background: #CED7E1;}.bg-purple-light {background: #e5e9f2;}.bg-purple-dark {background: #99a9bf;}
</style>
#分栏偏移
通过指定col组件的offset属性可以指定分栏偏移的栏数。
<view class="u-demo-block__content"><u-rowjustify="space-between"customStyle="margin-bottom: 10px"><u-colspan="3"offset="3"><view class="demo-layout bg-purple-light"></view></u-col><u-colspan="3"offset="3"><view class="demo-layout bg-purple"></view></u-col></u-row><u-row><u-col span="3"><view class="demo-layout bg-purple-light"></view></u-col><u-colspan="3"offset="3"><view class="demo-layout bg-purple"></view></u-col></u-row>
</view>
#对齐方式
通过row组件的justify来对分栏进行灵活的对齐， 可选值为start(或flex-start)、end(或flex-end)、center、around(或space-around)、between(或space-between)， 其最终的表现类似于css的justify-content属性。
注意：由于持微信小程序编译后的特殊结构，此方式不支持微信小程序。
<view class="u-demo-block__content"><u-rowjustify="space-between"customStyle="margin-bottom: 10px"><u-colspan="3"><view class="demo-layout bg-purple-light"></view></u-col><u-colspan="3"><view class="demo-layout bg-purple"></view></u-col></u-row><u-row><u-col span="3"><view class="demo-layout bg-purple-light"></view></u-col><u-colspan="3"><view class="demo-layout bg-purple"></view></u-col></u-row>
</view>API
#Row Props
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| gutter | 栅格间隔，左右各为此值的一半，单位任意 | String | Number | 0 | - |
| justify | 水平排列方式(微信小程序暂不支持) | String | start(或flex-start) | end(或flex-end) / center / around(或space-around) / between(或space-between) |
| align | 垂直排列方式 | String | center | top / bottom |
#Col Props
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| span | 栅格占据的列数，总12等分 | String | Number | 0 | 1-12 |
| offset | 分栏左边偏移，计算方式与span相同 | String | Number | 0 | - |
| justify | 水平排列方式 | String | start | start(或flex-start)、end(或flex-end)、center、around(或space-around)、between(或space-between) |
| align | 垂直对齐方式 | String | stretch | top、center、bottom、stretch |
| textAlign | 文字水平对齐方式 | String | left | center / right |
#Row Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| click | row被点击 | - |
#Col Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| click | col被点击，会阻止事件冒泡到row | - |
总的来说，uView组件库提供了丰富的布局方法和UI组件，可以帮助UniApp开发者快速构建出美观、灵活的界面布局，提升开发效率，为用户提供更加舒适的交互体验。开发者可以根据项目需求选择合适的uView组件，轻松实现各种复杂的布局效果。