uniApp中uView组件库的丰富布局方法

目录

基本使用

#分栏间隔

#混合布局

#分栏偏移

#对齐方式

API

#Row Props

#Col Props

#Row Events

#Col Events

---

UniApp的uView组件库是一个丰富的UI组件库，提供了各种常用的UI组件和布局方法，帮助开发者快速构建美观、灵活的界面。下面给你写一篇关于uView组件库的布局方法的博客：

基本使用

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

#分栏间隔

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

#混合布局

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

#分栏偏移

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

#对齐方式

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

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

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组件，轻松实现各种复杂的布局效果。