[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”是要增加在容器的游戏对象里. 同时,只有容器对象的子对象才有排列效 ...
随机推荐
- django(路由层)
一.简介 # 路由匹配 url(r'test',views.test), url(r'test_add',views.test_add) # r'test'与请求头的数据进行正则匹配 ''' url方 ...
- vue核心基础-过渡动画
第一种方法:引入类名 .v-enter{ opacity: 0; } .v-enter-to{ opacity: 1; } .v-leave{ opacity: 1; } .v-leave-to{ o ...
- 二.安装ifconfig命令
二.安装ifconfig命令 1.ifconfig命令是设置或显示网络接口的程序,可以显示出我们机器的网卡信息,可是有些时候最小化安装CentOS等Linux发行版的时候会默认不安装ifconfig等 ...
- 感悟:FPGA的串行及并行设计思路
前言 FPGA设计过程中, 会遇到大量的串行转并行或者并行转串行的问题; 这些问题主要体现在FPGA对于速度和面积的均衡上; 一般而言, FPGA使用并行的设计可以提高处理的速度, 消耗更多的资源; ...
- Spring Cloud 服务的注册与发现之eureka客户端注册
1.在客户端maven项目中添加eureka客户端依赖 <dependency> <groupId>org.springframework.cloud</groupId& ...
- KingbaseES V8R6 集群运维案例 -- 脚本部署集群后ssh无法连接
案例说明: 在kylin V10环境下,通过脚本方式部署KingbaseES V8R6集群后,发现ssh无法连接主机,通过分析发现在脚本部署过程中会对系统环境进行优化配置,在修改了/etc/ssh/s ...
- KingbaseES 数据库安装报错案例分析
Linux系统安装V008R006C007B0012版本KingbaseES数据库报错:Unsupported major.minor version 52.0 系统版本: [root@vm-10-3 ...
- 【已解决】linux centos7系统磁盘扩容
第一步要手动加硬盘(我的操作是在20G的基础上加了30G) [reliable@hadoop102 ~]$ su root密码: 查看当前磁盘挂载情况: [root@hadoop102 reliabl ...
- C#/.NET/.NET Core优秀项目和框架2024年3月简报
前言 公众号每月定期推广和分享的C#/.NET/.NET Core优秀项目和框架(每周至少会推荐两个优秀的项目和框架当然节假日除外),公众号推文中有项目和框架的介绍.功能特点.使用方式以及部分功能截图 ...
- Visual Studio 2022的安装 - 编程手把手系列文章
工欲善其事,必先利其器. 今天讲的是编程开发工具Visual Studio 2022的安装.作为手把手系列的开始,需要先对进行编程所使用的工具进行了解.此博文从下面几个步骤入手,对VS 2022这个开 ...