ionic3 grid网格基础使用
来源:互联网 发布:用c语言控制九九乘法表 编辑:程序博客网 时间:2024/05/29 11:05
ionic3 grid网格基础使用
demo地址
解除ionci不久,需要开发一个页面,两列多行。大哥,这要是android,闭着眼睛都能写出来,脑子废了都没问题的事。可偏偏,这要用ionic来实现。
所以只能走正常流程了《百度》,结果全是写死的一个个<ion-col>
,我需要的效果是,根据返回的数据集合,动态的生成。我当时也是脑子抽了一下,一直以为,ion-grid或者ion-row等等能够直接设置列数之类的,然后把我的集合给她就好了的设置,但不太如意。
百度的结果也很不满意,要重新怀疑一下国内ionic的活跃程度
最后还是github上找案例吧。终于解决了这个问题。(小白来的,要体谅)
<ion-grid> <ion-row *ngFor="let rowList of getRowListByGridList(2)"> <ion-col *ngFor="let colItem of rowList"> {{colItem.name}} </ion-col> </ion-row>
当初怎么都没忘这个方向想,哈哈。思路就是:遍历行,然后遍历列,将数据集合拆分为多个集合。例如:【1,2,3,4,5,6】,分为两列,【1,2】,【3,4】,【5,6】。
/* * size : 一行分为size列 * 原理 : 假设size=2,则【1,2,3,4,5,6,7,8,9】=>【1,2】,【3,4】,【5,6】,【7,8】,【9】 * */ getRowListByGridList(size) { var rowList = [] for (var i = 0; i < this.gridList.length; i += size) { rowList.push(this.gridList.slice(i, i + size)); } return rowList }
集合拆分的逻辑也非常简单。最后附上效果图:
阅读全文
0 0
- ionic3 grid网格基础使用
- jquerymobile-19 使用网格(grid)显示页面
- jquerymobile-9 使用网格(grid)显示页面
- 使用开源Grid平台-GridGain实现网格计算
- 使用开源Grid平台-GridGain实现网格计算
- 使用开源Grid平台-GridGain实现网格计算
- 使用开源Grid平台-GridGain实现网格计算
- 使用开源Grid平台-GridGain实现网格计算
- 使用开源Grid平台-GridGain实现网格计算
- 使用开源Grid平台-GridGain实现网格计算
- 使用开源Grid平台-GridGain实现网格计算
- 使用开源Grid平台-GridGain实现网格计算
- 使用开源Grid平台-GridGain实现网格计算
- 使用开源Grid平台-GridGain实现网格计算
- 使用开源Grid平台-GridGain实现网格计算
- 使用开源Grid平台-GridGain实现网格计算
- 使用开源Grid平台-GridGain实现网格计算
- 使用开源Grid平台-GridGain实现网格计算
- 安卓开发中非常炫的效果集合
- 06_c++静态成员和友元
- Linux Netlink基本使用
- 以菱形链接(diamond link)为例,探讨Linux下连接器和加载器对Shared libarary兼容性的处理
- !@#$赛车pk10大小单双走势技巧之八码滚雪球走势技巧教学@#$1
- ionic3 grid网格基础使用
- python 插入数据库错误的字符编码问题
- 在Lua中继承Cocos2dx的C++类
- Xms Xmx PermSize MaxPermSize 区别
- Java中的访问权限详解
- 归并排序
- 关于24点问题的深入(Java)
- 二叉树 24点游戏(Ⅰ) (浮点型精度问题!!!)
- 【unity3d】利用键盘操作物体移动的方法