文档上的描述是比较简陋的,不明所以。

核心就是两块内容,一个是 uni-grid 可以加 change 事件;另一个是 uni-grid-item 上面 index 属性值会作为 change 指定函数的参数一部分返回,格式是 {detail:{index:0}}

举例,局部代码如下:

<uni-grid :column="3" @change="gridClicked">
<uni-grid-item v-for="item in list" :index="item.id">
<text class="text">{{ item.name }}</text>
</uni-grid-item>
</uni-grid> <script>
methods: {
gridClicked (e) {
console.log(e)
}
}
</script>

Refer:uni-app官方组件

Doc:https://ext.dcloud.net.cn/plugin?id=27

Link:https://www.cnblogs.com/farwish/p/13843893.html

[FE] uni-app Grid 宫格组件 uni-grid 用法的更多相关文章

  1. uni app中使用自定义图标库

    项目中难免会用到自定义图标,那在uni app中应该怎么使用呢? 首先, 将图标目录放在static资源目录下: 在main.js中引入就可以全局使用了 import '@/static/icon-o ...

  2. ExtJS4.2学习(11)——高级组件之Grid

    大纲: 1.首先,搭建起来一个最基础的Grid组件: 2.其次,利用前边MVC架构将代码重构: 3.再者,介绍下Grid的一些特性. 一.搭建基础的Grid组件 在文章的开始,我们首先简单的搭建一个G ...

  3. Android自定义多宫格解锁控件

    在此之前,一直在想九宫格的实现方法,经过一个上午的初步研究终于完成了一个简单的N*N的宫格解锁组件,代码略显粗糙,仅仅做到简单的实现,界面等后期在做优化,纯粹是学习的目的,在算法上有点缺陷,如果有错误 ...

  4. BootStrap入门教程 (一) :手脚架Scaffolding(全局样式(Global Style),格网系统(Grid System),流式格网(Fluid grid System),自定义(Customing),布局(Layouts))

    2011年,twitter的“一小撮”工程师为了提高他们内部的分析和管理能力,用业余时间为他们的产品构建了一套易用.优雅.灵活.可扩展的前端工具集--BootStrap.Bootstrap由MARK ...

  5. Extjs4中的常用组件:Grid、Tree和Form

    至此我们已经学习了Data包和布局等API.下面我们来学习作为Extjs框架中我们用得最多的用来展现数据的Grid.Tree和Form吧! 目录: 5.1. Grid panel 5.1.1. Col ...

  6. 前端组件库 - 搭建web app常用的样式/组件等收集列表(移动优先)

    0. 前端自动化(Workflow) 前端构建工具 Webpack - module bundler Yeoman - a set of tools for automating developmen ...

  7. 宫格布局实例(注意jquery的版本号要统一)

    <!DOCTYPE html><html><head><meta charset="utf-8" /><style> * ...

  8. 宫格布局实例(注意jquery的版本号要统一)2

    <!DOCTYPE html><html><head><meta charset="utf-8" /><style> * ...

  9. css-九宫格自适应的实现

    高度自适应使用padding 或 padding-bottom + 百分比来实现: 宽度自适应使用width + 百分比来实现. 下面是实现九宫格自适应的代码: <!DOCTYPE html&g ...

  10. Unity3D 使用 UI 的 Grid Layout Group 组件。

    1.首先创建一个容器,用于存放列表项的内容. 这里使用 Panel 来做为容器. 这里要注意! “Grid Layout Group”是要增加在容器的游戏对象里. 同时,只有容器对象的子对象才有排列效 ...

随机推荐

  1. 摄影系列:李涛ps视频教程笔记

    四种颜色模式: HSB:人眼的识别. RGB:基于光.(RGB自然三原色,三个最大值,得出白色,所以RGB为加色模式) CMY:基于印刷.(青.品.黄印刷三原色,三个最大值,得出黑色,所以CMY为减色 ...

  2. 《.NET内存管理宝典 》(Pro .NET Memory Management) 阅读指南 - 第7章

    本章勘误: 暂无,等待细心的你告诉我哦. 本章注解: 暂无 本章释疑: 暂无,等待你的提问 致谢: MVP 林德熙 MVP 吕毅 sPhinX 相关链接 试读记录

  3. 使用 shell 脚本自动申请进京证 (六环外)

    问题背景 外地车辆进入北京,需要办理<进京证>,不办理证件驶入后会被执法设备抓拍,一次罚 100 扣 1 分,目前唯一的线上办理通道是下载<北京交警>App,注册后添加车辆,就 ...

  4. #LCT,树状数组#CF1137F Matches Are Not a Child's Play

    题目 分析 考虑从删除序列末尾来看,最大值一定在末尾, 然后与次大值之间夹了整条路径的点,降序以此类推 实际上从小到大是每个点到最大点的路径被打通的过程,由此分成若干条实链. 删除序列的位置实际上是到 ...

  5. #NTT,原根#洛谷 3321 JZOJ 4051 [SDOI2015]序列统计

    题目 分析 首先朴素dp方程 设\(dp[i][j]\)表示\(i\)个数的数列乘积为\(j\)的方案 那么\(dp[i][j*a[k]\bmod m]=itself+dp[i-1][j]\) 这可以 ...

  6. CentOS 9 安装 Nginx 模块 `subs_filter`

    sub_filter 和 subs_filter 区别 sub_filter( 0.7.24):替换响应体(Response Body)中的文本,只能设置一组替换. subs_filter:替换响应体 ...

  7. 本周四晚19:00知识赋能第3期直播丨OpenHarmony智能家居项目之控制面板功能实现

    OpenAtom OpenHarmony(以下简称"OpenHarmony")开源开发者成长计划项目自 2021 年 10 月 24 日上线以来,在开发者中引发高度关注. 成长计划 ...

  8. 使用Helm部署Wikijs

    使用 Helm 部署 Wiki.js ️ 参考文档: Wiki.js 官方文档 - 安装 - Kubernetes Wiki.js 使用 Helm 安装 Wiki.js 官方文档 - 安装 - 侧加载 ...

  9. HDD杭州站•ArkUI让开发更灵活

    原文:https://mp.weixin.qq.com/s/cX48CPs61daKOC2J5znyJw,点击链接查看更多技术内容. 7月15日的HUAWEI Developer Day(简称HDD) ...

  10. Mybatis终极案例之注解开发

    Mybatis终极案例之注解开发 一.注解开发实现CURD操作 1.环境搭建 参考入门案例,环境搭建主要分为如下几步: 1.配置pom.xml <packaging>jar</pac ...