[FE] uni-app Grid 宫格组件 uni-grid 用法

文档上的描述是比较简陋的,不明所以。
核心就是两块内容,一个是 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 用法的更多相关文章
- uni app中使用自定义图标库
项目中难免会用到自定义图标,那在uni app中应该怎么使用呢? 首先, 将图标目录放在static资源目录下: 在main.js中引入就可以全局使用了 import '@/static/icon-o ...
- ExtJS4.2学习(11)——高级组件之Grid
大纲: 1.首先,搭建起来一个最基础的Grid组件: 2.其次,利用前边MVC架构将代码重构: 3.再者,介绍下Grid的一些特性. 一.搭建基础的Grid组件 在文章的开始,我们首先简单的搭建一个G ...
- Android自定义多宫格解锁控件
在此之前,一直在想九宫格的实现方法,经过一个上午的初步研究终于完成了一个简单的N*N的宫格解锁组件,代码略显粗糙,仅仅做到简单的实现,界面等后期在做优化,纯粹是学习的目的,在算法上有点缺陷,如果有错误 ...
- BootStrap入门教程 (一) :手脚架Scaffolding(全局样式(Global Style),格网系统(Grid System),流式格网(Fluid grid System),自定义(Customing),布局(Layouts))
2011年,twitter的“一小撮”工程师为了提高他们内部的分析和管理能力,用业余时间为他们的产品构建了一套易用.优雅.灵活.可扩展的前端工具集--BootStrap.Bootstrap由MARK ...
- Extjs4中的常用组件:Grid、Tree和Form
至此我们已经学习了Data包和布局等API.下面我们来学习作为Extjs框架中我们用得最多的用来展现数据的Grid.Tree和Form吧! 目录: 5.1. Grid panel 5.1.1. Col ...
- 前端组件库 - 搭建web app常用的样式/组件等收集列表(移动优先)
0. 前端自动化(Workflow) 前端构建工具 Webpack - module bundler Yeoman - a set of tools for automating developmen ...
- 宫格布局实例(注意jquery的版本号要统一)
<!DOCTYPE html><html><head><meta charset="utf-8" /><style> * ...
- 宫格布局实例(注意jquery的版本号要统一)2
<!DOCTYPE html><html><head><meta charset="utf-8" /><style> * ...
- css-九宫格自适应的实现
高度自适应使用padding 或 padding-bottom + 百分比来实现: 宽度自适应使用width + 百分比来实现. 下面是实现九宫格自适应的代码: <!DOCTYPE html&g ...
- Unity3D 使用 UI 的 Grid Layout Group 组件。
1.首先创建一个容器,用于存放列表项的内容. 这里使用 Panel 来做为容器. 这里要注意! “Grid Layout Group”是要增加在容器的游戏对象里. 同时,只有容器对象的子对象才有排列效 ...
随机推荐
- L7结合Turf.js实现空间分析与数据可视化
1. 概述 AntV L7 是蚂蚁集团 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析引擎,其特点是通过简单的代码进行配置,即可在前端网页中绘制精美的地图以及相关的图 ...
- TP6框架--EasyAdmin学习笔记:项目初始化+环境配置
最近在研究一个基于TP6的框架EasyAdmin,这里分享下我的开发心得 首先要获取原始项目文件 这里是git地址 https://github.com/zhongshaofa/easyadmin 项 ...
- .NET分布式Orleans - 3 - Grain放置
在Orleans 7中,Grain放置是指确定将Grain对象放置在Orleans集群中的哪些物理节点上的过程. Grain是Orleans中的基本单位,代表应用程序中的逻辑单元或实体.Grain放置 ...
- UE4蓝图对Actor的引用
通过关卡蓝图调用 在关卡中放置一个Actor,在关卡蓝图中右键 create a reference to actor,即可 注意使用该方法创建时,需要现在关卡中选择上该类Actor 当Actor生成 ...
- archlinux virtualbox使用文件共享 主机arch,客机windows8.1 windows10
参照 https://www.cnblogs.com/cuitang/p/11263008.html 1.安装virtualbox增强功能VBoxGuestAdditions.iso (1)从virt ...
- Vue3 Diff 之 patchKeyedChildren 动态示例
在学习全网学习各路大神的关于Vue3 Diff算法分析文章的时候,一定离不开关键方法 patchKeyedChildren. patchKeyedChildren 处理的场景比较多,大致有 5 个主要 ...
- OpenHarmony 3.1 Release版本关键特性解析——ArkUI框架又有哪些新增能力?
ArkUI 是一套 UI 开发框架,它提供了开发者进行应用 UI 开发时所必须的能力.随着 OpenAtom OpenHarmony(以下简称"OpenHarmony") 3.1 ...
- 学习如何使用 Python 连接 MongoDB: PyMongo 安装和基础操作教程
Python 可以用于数据库应用程序.最流行的 NoSQL 数据库之一是 MongoDB MongoDB MongoDB 将数据存储在类似 JSON 的文档中,使数据库非常灵活和可扩展. 您可以在 M ...
- C 语言数组教程:定义、访问、修改、循环遍历及多维数组解析
C 数组 数组用于将多个值存储在单个变量中,而不是为每个值声明单独的变量. 要创建数组,请定义数据类型(例如 int)并指定数组名称,后面跟着方括号 []. 要将值插入其中,请使用逗号分隔的列表,并在 ...
- SQL 数据库语句- 创建和管理数据库
SQL CREATE DATABASE 语句 SQL CREATE DATABASE 语句用于创建一个新的 SQL 数据库. 语法 CREATE DATABASE 数据库名称; 示例 以下 SQL 语 ...