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 相关文章推荐
通过javascript的匿名函数来分析几段简单有趣的代码
Jun 29 Javascript
jQuery下通过$.browser来判断浏览器.
Apr 05 Javascript
用按钮控制iframe显示的网页实现方法
Feb 04 Javascript
Javascript中Date类型和Math类型详解
Feb 27 Javascript
js获取页面及个元素高度、宽度的代码
Apr 26 Javascript
Jquery uploadify 多余的Get请求(404错误)的解决方法
Jan 26 Javascript
Bootstrap进度条学习使用
Feb 09 Javascript
d3.js入门教程之数据绑定详解
Apr 28 Javascript
深入理解vue $refs的基本用法
Jul 13 Javascript
谈谈vue中mixin的一点理解
Dec 12 Javascript
使用electron将vue-cli项目打包成exe的方法
Sep 29 Javascript
vue 实现tab切换保持数据状态
Jul 21 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
日本十大最佳动漫,全都是二次元的神级作品
2019/10/05 日漫
php网上商城购物车设计代码分享
2012/02/15 PHP
PHP之APC缓存详细介绍 apc模块安装
2014/01/13 PHP
PHP+Apache+Mysql环境搭建教程
2016/08/01 PHP
php中get_magic_quotes_gpc()函数说明
2017/02/06 PHP
可以支持多中格式的JS键盘
2007/05/02 Javascript
File文件控件,选中文件(图片,flash,视频)即立即预览显示
2009/04/09 Javascript
JS实现随机化快速排序的实例代码
2013/08/01 Javascript
js实现单行文本向上滚动效果实例代码
2013/11/28 Javascript
浅谈JavaScript中的作用域和闭包问题
2015/07/07 Javascript
jQuery绑定事件-多种实现方式总结
2016/05/09 Javascript
jQuery实现checkbox的简单操作
2017/11/18 jQuery
vue加载完成后的回调函数方法
2018/09/07 Javascript
vue自定义tap指令及tap事件的实现
2018/09/18 Javascript
JS/jQuery实现超简单的Table表格添加,删除行功能示例
2019/07/31 jQuery
JavaScript实现简易聊天对话框(加滚动条)
2020/02/10 Javascript
打开电脑上的QQ的python代码
2013/02/10 Python
Python 时间操作例子和时间格式化参数小结
2014/04/24 Python
将图片文件嵌入到wxpython代码中的实现方法
2014/08/11 Python
python链接Oracle数据库的方法
2015/06/28 Python
机器学习python实战之决策树
2017/11/01 Python
Python实现爬虫爬取NBA数据功能示例
2018/05/28 Python
python 监听salt job状态,并任务数据推送到redis中的方法
2019/01/14 Python
Python Image模块基本图像处理操作小结
2019/04/13 Python
python实现微信小程序用户登录、模板推送
2019/08/28 Python
使用tensorflow实现VGG网络,训练mnist数据集方式
2020/05/26 Python
HTML5 Canvas图像模糊完美解决办法
2018/02/06 HTML / CSS
梅花魂教学反思
2014/04/25 职场文书
2014年妇联工作总结
2014/11/21 职场文书
部门经理迟到检讨书
2015/02/16 职场文书
感恩节寄语2015
2015/03/24 职场文书
毕业论文致谢格式模板
2015/05/14 职场文书
人生遥控器观后感
2015/06/11 职场文书
导游词之井冈山
2019/11/20 职场文书
分析SQL窗口函数之取值窗口函数
2022/04/21 Oracle
Python matplotlib绘制条形统计图 处理多个实验多组观测值
2022/04/21 Python