目录
[#Row Props](#Row Props)
[#Col Props](#Col Props)
[#Row Events](#Row Events)
[#Col 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-row
justify="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-row
justify="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-row
justify="space-between"
customStyle="margin-bottom: 10px"
>
<u-col
span="3"
offset="3"
>
<view class="demo-layout bg-purple-light"></view>
</u-col>
<u-col
span="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-col
span="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-row
justify="space-between"
customStyle="margin-bottom: 10px"
>
<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-row>
<u-row>
<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-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组件,轻松实现各种复杂的布局效果。