Grid 宫格

2024-07-17 11:45| 来源: 网络整理| 查看: 265

# Grid 宫格概述

Grid 宫格，主要使用场景如：热门内容等。 Grid 提供了fui-grid 和 fui-grid-item 两个组件来进行布局。

# 引入以下介绍两种常用的引入方式。第一种：在页面json文件中引入 { "navigationBarTitleText": "宫格", "usingComponents": { "fui-grid": "/components/firstui/fui-grid/fui-grid", "fui-grid-item": "/components/firstui/fui-grid-item/fui-grid-item" } } 1234567 第二种：在根目录app.json文件中全局引入 "usingComponents": { "fui-grid": "components/firstui/fui-grid/fui-grid", "fui-grid-item": "components/firstui/fui-grid-item/fui-grid-item" } 1234 # 代码演示部分示例演示，完整使用请参考示例程序以及文档API。基础使用

九宫格。

Grid 12345678Page({ data: { nums: [0, 1, 2, 3, 4, 5, 6, 7, 8] } }) 12345 高度自适应

通过 square 属性设置宫格item是否为正方形显示，设置为false则高度自适应。

Grid 123456789Page({ data: { nums: [0, 1, 2, 3, 4, 5, 6, 7, 8] } }) 12345 修改列数

通过 columns 属性设置宫格每行显示的item数。

Grid 123456789Page({ data: { arrs: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11] } }) 12345 # Slots # fui-grid 组件插槽名称说明 default 标签显示内容，内部由一个或多个fui-grid-item组成 # fui-grid-item 组件插槽名称说明 default 标签内显示的自定义内容 # Props # fui-grid 组件属性名类型说明默认值其他说明 columns Number 每行显示item数 3 - showBorder Boolean 是否显示边框 true - borderColor String 边框颜色 #EEEEEE 可通过css变量修改 square Boolean item是否显示为正方形 true - # fui-grid-item 组件属性名类型说明默认值其他说明 highlight Boolean 是否有点击效果 true - backgroundColor String 背景颜色 transparent - index Number item索引 0 - # Events # fui-grid 组件事件名说明回调参数 bind:click 点击item时触发 e.detail = { index:索引} # fui-grid-item 组件事件名说明回调参数 bind:click V1.9.5+ 点击item时触发 e.detail={ index:索引} 示例预览 Last Updated: 10/7/2023, 12:14:41 PM

← Layout 栅格布局 Panel 面板 →

【本文地址】

Grid 宫格

Grid 宫格

今日新闻

推荐新闻