ionic grid(栅格)九宫格制作详解


Posted in Javascript onJune 30, 2018

本文实例为大家分享了ionic grid九宫格制作的具体代码,供大家参考,具体内容如下

1、Html

<ion-header-bar class="bar bar-header bar-light bar-calm">
  <button class="button button-icon icon ion-navicon"></button>
  <ion-title class="bar-calm">腾讯新闻</ion-title>
</ion-header-bar>
 
<ion-content>
  <div class="row row-wrap">
    <div class="col col-25" ng-repeat="item in items">
      <img src="img/ionic.png" ng-click="alertClick({{item.text}})">
    </div>
  </div>
  <br>
  <div class="row row-wrap">
    <div class="col col-25" ng-repeat="item in items">
      <p>{{item.text}}</p>
    </div>
  </div>
  <br>
  <div class="row row-wrap">
    <div class="col col-25" ng-repeat="item in items">
      <ul>
        <li>
          <img src="img/ionic.png" ng-click="alertClick({{item.text}})">
          <p>{{item.text}}</p>
        </li>
      </ul>
    </div>
  </div>
</ion-content>

2、Controller

appCntrollers.controller('ManageGridCtrl', function ($scope, $timeout, $ionicLoading) {
  $ionicLoading.show({
    content: 'Loading',
    animation: 'fade-in',
    showBackdrop: true,
    maxWidth: 200,
    showDelay: 0
  });
 
  $timeout(function () {
    $ionicLoading.hide();
    $scope.items = [
      { id: 1, text: "111111" }, { id: 2, text: "222222" }, { id: 3, text: "333333" },
      { id: 4, text: "444444" }, { id: 5, text: "555555" }, { id: 6, text: "666666" },
      { id: 7, text: "777777" }, { id: 8, text: "888888" }, { id: 9, text: "999999" },
      { id: 10, text: "aaaaaa" }, { id: 11, text: "bbbbbb" }, { id: 12, text: "cccccc" },
    ];
  }, 2000);
 
  $scope.alertClick = function (val) {
    alert(val);
  }
})

3、Css

/* 栅格grid */
.col-25{border: 1px solid #ddd;height: 120px;display:flex;justify-content:center;align-items: center;}
.col-25 img {height: 64px; width: 64px;}
.col-25 ul li img {height: 64px; width: 64px;margin-top: 12px}
.col-25 ul li p {text-align: center;}

4、效果图

ionic grid(栅格)九宫格制作详解

ionic grid(栅格)九宫格制作详解

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
腾讯UED 漂亮的提示信息效果代码
Sep 12 Javascript
Ext JS添加子组件的误区探讨
Jun 28 Javascript
javascript框架设计读书笔记之种子模块
Dec 02 Javascript
JavaScript的ExtJS框架中表格的编写教程
May 21 Javascript
jQuery插件实现文件上传功能(支持拖拽)
Aug 27 Javascript
关于Jquery中的bind(),on()绑定事件方式总结
Oct 26 Javascript
JS实现滑动门效果的方法详解
Dec 19 Javascript
JQuery页面随滚动条动态加载效果的简单实现(推荐)
Feb 08 Javascript
webpack将js打包后的map文件详解
Feb 22 Javascript
Vue使用zTree插件封装树组件操作示例
Apr 25 Javascript
Vue.js实现立体计算器
Feb 22 Javascript
vue2的 router在使用过程中遇到的一些问题
Apr 13 Vue.js
vue检测对象和数组的变化分析
Jun 30 #Javascript
浅析vue.js数组的变异方法
Jun 30 #Javascript
详解vue添加删除元素的方法
Jun 30 #Javascript
vue.js删除列表中的一行
Jun 30 #Javascript
vue v-model动态生成详解
Jun 30 #Javascript
vue-router+nginx 非根路径配置方法
Jun 30 #Javascript
Vue项目中添加锁屏功能实现思路
Jun 29 #Javascript
You might like
PHP中显示格式化的用户输入
2006/10/09 PHP
PHP将字符分解为多个字符串的方法
2014/11/22 PHP
php中stdClass的用法分析
2015/02/27 PHP
thinkPHP5.0框架自动加载机制分析
2017/03/18 PHP
Laravel学习教程之路由模块
2017/08/18 PHP
laravel接管Dingo-api和默认的错误处理方式
2019/10/25 PHP
js遍历td tr等html元素
2012/12/13 Javascript
纯css+js写的一个简单的tab标签页带样式
2014/01/28 Javascript
AngularJs实现ng1.3+表单验证
2015/12/10 Javascript
Vue.JS入门教程之事件监听
2016/12/01 Javascript
bootstrap table方法之expandRow-collapseRow展开或关闭当前行数据
2020/08/09 Javascript
Vue中的Vux配置指南
2017/12/08 Javascript
Es6 Generator函数详细解析
2018/02/24 Javascript
vue中Element-ui 输入银行账号每四位加一个空格的实现代码
2018/09/14 Javascript
学习node.js 断言的使用详解
2019/03/18 Javascript
如何获取vue单文件自身源码路径
2019/05/06 Javascript
微信小程序 行的删除和增加操作实现详解
2019/09/29 Javascript
vue之延时刷新实例
2019/11/14 Javascript
Element-ui el-tree新增和删除节点后如何刷新tree的实例
2020/08/31 Javascript
JavaScript封装单向链表的示例代码
2020/09/17 Javascript
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
2020/12/25 Vue.js
[15:46]教你分分钟做大人——沙王
2015/03/11 DOTA
[04:03]辉夜杯主赛事 12月25日RECAP精彩回顾
2015/12/26 DOTA
Python中使用tarfile压缩、解压tar归档文件示例
2015/04/05 Python
用Python的Django框架来制作一个RSS阅读器
2015/07/22 Python
Python线程指南详细介绍
2017/01/05 Python
pandas 使用均值填充缺失值列的小技巧分享
2019/07/04 Python
纽约和芝加哥当天送花:Ode à la Rose
2019/07/05 全球购物
荷兰网上药店:Drogisterij.net
2019/09/03 全球购物
Mamaearth官方网站:印度母婴护理产品公司
2019/10/06 全球购物
商业街策划方案
2014/05/31 职场文书
幼儿园大班毕业评语
2014/12/31 职场文书
综合管理员岗位职责
2015/02/11 职场文书
浅谈Mysql多表连接查询的执行细节
2021/04/24 MySQL
python 爬取天气网卫星图片
2021/06/07 Python
python index() 与 rindex() 方法的使用示例详解
2022/12/24 Python