[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”是要增加在容器的游戏对象里. 同时,只有容器对象的子对象才有排列效 ...
随机推荐
- python基础六(函数基础及参数使用)
一. 函数定义 1.什么是函数 函数就相当于具备某一功能的工具 函数的使用必须遵循一个原则: 先定义 后调用2.为何要用函数 代码冗余,程序的组织结构不清晰,可读性差 可维护性.扩展性差3.如何用函数 ...
- 记录--封装一个通过js调用的全局vue组件
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 前言 在使用vue项目编写的时候,不可避免的会碰到需要时js api来调用组件进行显示的情况 例如饿了么element ui 的 Noti ...
- Python 利用pandas多列分组多列求和
一.需求描述: 如下Excel数据 需要按 ASIN.SKU.品名.店铺 对 1-31 的列进行分组求和,实际数据是有很多重复的SKU数据 二.代码实现 import pandas as pd # 从 ...
- Numpy 模块常用函数速查表
序 号 方 法 说 明 1 array(object[, dtype, copy, order, subok, ndmin]) 创建一个数组 2 asarray(a[, dtype, o ...
- ArrayList扩容代码分析
ArrayList扩容机制是在面试中频繁出现的问题,平时了解的比较含糊,特此记录! 注意:每次发生扩容,其容量扩充为原来的1.5倍左右 add方法 public boolean add(E e) { ...
- IntelliJ IDEA集成本地Maven步骤
IntelliJ IDEA集成本地Maven步骤 一.前期准备 Maven已经在本地环境配置完成,步骤可以参考我的这篇文章: https://www.cnblogs.com/rainbow-1/p/1 ...
- 开源车牌识别系统HyperLPR踩坑
项目地址 https://github.com/zeusees/HyperLPR python配置参考文章 https://www.jianshu.com/p/7ab673abeaae 安装Anaco ...
- 白话分解入门操作系统到 Java
一.完成一个任务需要什么? 时间 + 资源 + 处理能力 时间就是时间. 资源就是资源. 处理能力就是能够利用时间和资源完成任务的主体. 二.关于操作系统 处理能力就是cpu. 资源就是存储. 时间就 ...
- Jmeter线程组-上
线程组 线程组作为JMeter测试计划的核心组件之一,对于模拟并发用户的行为至关重要.线程组元件是整个测试计划的入口,所有的取样器和控制器必须放置在线程组下. 可以将线程组视为一个虚拟用户池,其中每个 ...
- #期望dp#洛谷 6835 [Cnoi2020]线形生物
题目 分析 设\(f[i]\)表示由点\(i\)走到点\(i+1\)的期望步数, \(dp[i]\)表示由点1走到点\(i+1\)的期望步数, 那么\(dp\)为\(f\)的前缀和,最后答案为\(dp ...