guanmao-wxapp/uni_modules/uni-grid

Grid 宫格

组件名：uni-grid 代码块： uGrid

宫格组件。

安装方式

本组件符合easycom规范，HBuilderX 2.5.5起，只需将本组件导入项目，在页面template中即可直接使用，无需在页面中import和注册components。

如需通过npm方式使用uni-ui组件，另见文档：https://ext.dcloud.net.cn/plugin?id=55

注意事项 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。

• 删除组件自带圆点角标效果，完全交给用户实现，示例有简单角标效果实现
• Grid 组件仅在自定义组件模式下支持
• column 属性最大值最好不要超过 5 个，如果超过，需要注意内容显示
• 支付宝小程序平台需要在支付宝小程序开发者工具里开启 component2 编译模式，开启方式： 详情 --> 项目配置 --> 启用 component2 编译
• 为了避免高度显示错误组件内必须要有内容

基本用法

在 template 中使用组件

<!-- 一般用法 -->
<uni-grid :column="3">
	<uni-grid-item>
		<text class="text">文本</text>
	</uni-grid-item>
	<uni-grid-item>
		<text class="text">文本</text>
	</uni-grid-item>
	<uni-grid-item>
		<text class="text">文本</text>
	</uni-grid-item>
</uni-grid>

<!-- 不带边框并矩形显示 -->
<uni-grid :column="3" :showBorder="false"  :square="false">
	<uni-grid-item>
		<text class="text">文本</text>
	</uni-grid-item>
	<uni-grid-item>
		<text class="text">文本</text>
	</uni-grid-item>
	<uni-grid-item>
		<text class="text">文本</text>
	</uni-grid-item>
	<uni-grid-item>
		<text class="text">文本</text>
	</uni-grid-item>
	<uni-grid-item>
		<text class="text">文本</text>
	</uni-grid-item>
	<uni-grid-item>
		<text class="text">文本</text>
	</uni-grid-item>
</uni-grid>

API

Grid Props

uni-grid 属性说明：

属性名	类型	默认值	说明
column	Number	3	每列显示个数
borderColor	String	#d0dee5	边框颜色
showBorder	Boolean	true	是否显示边框
square	Boolean	true	是否方形显示
highlight	Boolean	true	点击背景是否高亮

Grid Events

事件名	说明	返回值
@change	点击 grid 触发	e={detail:{index:0}}，index 为当前点击 gird 下标

GridItem Props

属性名	类型	默认值	说明
index	Number	-	子组件的唯一标识 ，点击gird会返回当前的标识

组件示例

点击查看：https://hellouniapp.dcloud.net.cn/pages/extUI/grid/grid