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

核心就是两块内容,一个是 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. JS(数组)

    一 数组的概念 问:之前学习的数据类型,只能存储一个值.如果我们想存储班级中所有学生的姓名,那么该如何存储呢?答:可以使用数组(Array).数组可以把一组相关的数据一起存放,并提供方便的访问(获取) ...

  2. 记录--使用Lunchbox 在 vue3 中创建一个 3D 地球

    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 什么是 Lunchbox.js Lunchbox.js 是 Three.js 的 Vue 3 自定义渲染器. 你可以把它想象成 Vue 的 ...

  3. HTML/ CSS 入门

    前言 我们在之前的学习中,对于网络有了一定的了解.现在我们来学习一些基础的 HTML/ CSS 知识.希望阅读完这篇文章能达到编写简单页面的程度. 目录: HTML/ CSS 的发明: HTML 基础 ...

  4. ios应用免签+微信分身

    一句话概括:用TrollStore自动加签安装微信ipa文件,实现ios上微信应用分身. 工具: 1. ios14.1 2. GTA Car Tracher 这个应用程序并不是真正的 GTA Car ...

  5. Docker网络模型以及容器通信

    本篇接着上篇:[Docker0网络及原理探究],继续深入探究容器网络通信原理,通过学习Docker网路驱动模型,更好地解决容器间的通信问题 1.Docker的网络驱动模型 1.1.Docker的网络驱 ...

  6. Java内存马2-Spring内存马

    Spring内存马 目录 Spring内存马 1.Spring&Spring MVC简介 2.环境搭建 3.Controller内存马 4.踩坑日记 5.Interceptor内存马 1.Sp ...

  7. module的定义及端口的作用

    模型功能 module是verilog中层次划分的基本单元 通过module之间的调用,可以实现硬件描述层次的提高 端口列表则是module的输入输出,和数字电路的走线连接等效 基于module的不断 ...

  8. 链表栈(LinkedListStack)

      链式栈:就是一种操作受限的单向链表,每次入栈一个元素,向链表中添加一个节点,出栈一个元素,释放一个节点.因为栈具有"后进先出"的特点,如果每次在链表的尾部进行插入和删除,就要遍 ...

  9. Emmet Documentation ( Actions+Filters+Customization )

    Emmet Documentation Actions Expand Abbreviation Balance 选择范围 Go to Matching Pair 匹配对应标签 在sublime tex ...

  10. Tomcat内存马分析

    前言 自己简单搭建一个Tomcat项目,IDEA里选择JavaEE,勾上web就行了 加个依赖(这样就能找到三个Context了: <dependency> <groupId> ...