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

核心就是两块内容,一个是 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. 假期做了一项调研:大厂为啥都自研RPC?结果合乎情理!

    大家好,我是冰河~~ 五一假期过的可真快,今天开始,又要搬砖了.在五一假期当中,冰河做了一项调研,感觉结果还是挺合乎情理的. 翻看招聘信息 先来看我在某招聘网站上随便搜索了下Java招聘的岗位,看到的 ...

  2. CornerNet-Lite:CornerNet粗暴优化,加速6倍还提点了 | BMVC 2020

    论文对CornerNet进行了性能优化,提出了CornerNet-Saccade和CornerNet-Squeeze两个优化的CornerNet变种,优化的手段具有很高的针对性和局限性,不过依然有很多 ...

  3. NetAdapt:MobileNetV3用到的自动化网络简化方法 | ECCV 2018

    NetAdapt的思想巧妙且有效,将优化目标分为多个小目标,并且将实际指标引入到优化过程中,能够自动化产生一系列平台相关的简化网络,不仅搜索速度快,而且得到简化网络在准确率和时延上都于较好的表现   ...

  4. KingbaseESV8R6 heap table末端垃圾页回收机制

    前言 默认情况下,vacuum表不能释放磁盘空间,只是在dead tuple做个标记位,但heap table末端的垃圾页可以被truncate,从磁盘中释放空间.例如表的末尾的100个数据块里面全是 ...

  5. KingbaseES V8R6 复制冲突之锁类型冲突

    背景 昨天遇到客户现场的一个有关复制冲突的问题 备库报错:ERROR: canceling statement due to conflict with recovery,user was holdi ...

  6. gRPC入门学习之旅(四)

    gRPC入门学习之旅(一) gRPC入门学习之旅(二) gRPC入门学习之旅(三) 实现定义的服务 9.在"解决方案资源管理器"中,使用鼠标左键选中"Services&q ...

  7. 关于Guava Cache 需要注意的几点

    一.元素过期策略 expireAfterWrite(long duration, TimeUnit unit):在元素[写入]或者[值更新]后的一段时间之后,自动移除元素. 当duration=0时, ...

  8. 抗噪液晶屏驱动芯片VK2C22A/B适用于单相电表段码驱动,水瓦斯表段码表、驱动等

    产品型号:VK2C22A/B 产品品牌:永嘉微电/VINKA 封装形式:LQFP52/48.DICE(COB邦定片).COG(邦定玻璃用) 产品年份:新年份 (C21-285) VK2C22A/B概述 ...

  9. 【LGR-069】洛谷 2 月月赛 II & EE Round 2

    目录 前言 洛谷 6101 [EER2]出言不逊 分析 代码 洛谷 6102 [EER2]谔运算 分析 代码 洛谷 6103 [EER2] 直接自然溢出啥事没有 分析 代码 洛谷 6105 [Ynoi ...

  10. 深入理解 Java 循环结构:while、do while、for 和 for-each 循环

    Java 循环 循环可以执行一个代码块,只要达到指定的条件.循环很方便,因为它们节省时间,减少错误,并使代码更易读. Java While 循环 while 循环会循环执行一个代码块,只要指定的条件为 ...