[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”是要增加在容器的游戏对象里. 同时,只有容器对象的子对象才有排列效 ...
随机推荐
- 喜报|3DCAT入选“灵境杯”深圳市最佳元宇宙案例!
2022年11月10日~11日,2022全球元宇宙大会深圳站胜利召开,在本次大会上重磅发布"灵境杯"全球元宇宙创新大赛成果,公布深圳最具潜力元宇宙入选企业. 创新大赛结合" ...
- C++ Concurrency in Action 读书笔记二:用mutex互斥锁保护在线程间共享的数据
Chapter 3 线程间共享数据 3.2 用互斥锁保护共享数据
- Docker理论
一.什么是Dcoker 相信docker是什么大家都已经比较清楚了,网上有很详细的介绍,我这里只是大概描述一下. Docker是一个开源的引擎,可以轻松的为任何应用创建一个轻量级的.可移植的.自给自足 ...
- 【环境配置】vscode配置C C++开发和调试环境
按照本教程配置好之后,不再需要写任何tasks.json和launch.json文件,减轻记忆负担,即使是调试程序,也不用再写这些文件了,跟着做就能得到一个很好的集成开发环境 目录 msys2的安装与 ...
- jsonb操作符
json类型以文本方式存储json对象,把输入的数据原封不动的存放到数据库中,会保留多余的空格,保留重复的Key,保留Key的顺序. jsonb类型转换文本格式json对象为二进制格式,不保留多余的空 ...
- 【LGR-069】洛谷 2 月月赛 II & EE Round 2
目录 前言 洛谷 6101 [EER2]出言不逊 分析 代码 洛谷 6102 [EER2]谔运算 分析 代码 洛谷 6103 [EER2] 直接自然溢出啥事没有 分析 代码 洛谷 6105 [Ynoi ...
- #莫队,bitset#洛谷 3674 小清新人渣的本愿
题目 分析 只要做到\(O(n\sqrt{n})\)的时间复杂度就可以了 考虑莫队,首先乘号就是枚举\(x\)的约数\(d\), 判断\(d\)和\(\frac{x}{d}\)是否同时出现, 再考虑差 ...
- 【开源三方库】Easyui:基于OpenAtom OpenHarmony ArkUI深度定制的组件框架
万冬阳 公司:中国科学院软件所 小组:知识体系工作组 简介 Easyui是一套基于ArkTS语言开发的轻量.可靠的移动端组件库,它是对OpenAtom OpenHarmony(以下简称" ...
- LiteOS-A内核中的procfs文件系统分析
一. procfs介绍 procfs是类UNIX操作系统中进程文件系统(process file system)的缩写,主要用于通过内核访问进程信息和系统信息,以及可以修改内核参数改变系统行为.需要注 ...
- 视频播放测试地址(MP4、M3U8 格式)
最近在开发视频播放相关的业务功能,开发测试时,需要涉及到 MP4.M3U8 等视频格式. 我每次找测试视频地址时,都要找很久,现在把我在网上收集到的 MP4.M3U8 格式视频地址放在这里,希望帮助到 ...