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 相关文章推荐
jQuery checkbox全选/取消全选实现代码
Nov 14 Javascript
JS两种定义方式的区别、内部原理
Nov 21 Javascript
JavaScript获取伪元素(Pseudo-Element)属性的方法技巧
Mar 13 Javascript
jQuery Ajax 全局调用封装实例代码详解
Jun 02 Javascript
JavaScript数组去重的几种方法效率测试
Oct 23 Javascript
jQuery模拟下拉框选择对应菜单的内容
Mar 07 Javascript
微信小程序 后台登录(非微信账号)实例详解
Mar 31 Javascript
原生js封装添加class,删除class的实例
Nov 06 Javascript
npm 语义版本控制详解
Sep 10 Javascript
详解vue中v-bind:style效果的自定义指令
Jan 21 Javascript
Vue中使用Echarts仪表盘展示实时数据的实现
Nov 01 Javascript
vue 中的动态传参和query传参操作
Nov 09 Javascript
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调用Oracle存储过程的方法
2008/09/12 PHP
php操作JSON格式数据的实现代码
2011/12/24 PHP
PHP实现把数字ID转字母ID
2013/08/12 PHP
PHP获取数组最大值下标的方法
2015/05/12 PHP
简单的pgsql pdo php操作类实现代码
2016/08/25 PHP
THinkPHP获取客户端IP与IP地址查询的方法
2016/11/14 PHP
驱动事件的addEvent.js代码
2007/03/27 Javascript
在html页面中包含共享页面的方法
2008/10/24 Javascript
Js 获取HTML DOM节点元素的方法小结
2009/04/24 Javascript
jQuery 性能优化指南 (1)
2009/05/21 Javascript
js中文逗号转英文实现
2014/02/11 Javascript
javascript实现图片延迟加载方法汇总(三种方法)
2015/08/27 Javascript
js密码强度检测
2016/01/07 Javascript
微信小程序 loading(加载中提示框)实例
2016/10/28 Javascript
JavaScript 限制文本框不可输入英文单双引号的方法
2016/12/20 Javascript
vue2.0结合DataTable插件实现表格动态刷新的方法详解
2017/03/17 Javascript
JavaScript数组的5种迭代方法
2017/09/29 Javascript
微信小程序new Date()方法失效问题解决方法
2019/07/29 Javascript
深入浅析vue中cross-env的使用
2019/09/12 Javascript
基于Django filter中用contains和icontains的区别(详解)
2017/12/12 Python
python实现数据预处理之填充缺失值的示例
2017/12/22 Python
Python+selenium实现截图图片并保存截取的图片
2018/01/05 Python
opencv改变imshow窗口大小,窗口位置的方法
2018/04/02 Python
Python3中关于cookie的创建与保存
2018/10/21 Python
python变量赋值方法(可变与不可变)
2019/01/12 Python
python自动化测试之DDT数据驱动的实现代码
2019/07/23 Python
kafka监控获取指定topic的消息总量示例
2019/12/23 Python
python wav模块获取采样率 采样点声道量化位数(实例代码)
2020/01/22 Python
使用css3 属性如何丰富图片样式(圆角 阴影 渐变)
2012/11/22 HTML / CSS
Charlotte Tilbury英国官网:英国彩妆品牌
2017/05/26 全球购物
经典c++面试题三
2015/07/08 面试题
教师自我鉴定范文
2014/03/20 职场文书
中秋晚会策划方案
2014/06/12 职场文书
企业三严三实学习心得体会
2014/10/13 职场文书
民事撤诉申请书范本
2015/05/18 职场文书
使用 Apache Dubbo 实现远程通信(微服务架构)
2022/02/12 Servers