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 实现的全选和反选
Apr 15 Javascript
jquery 最简单的属性菜单
Oct 08 Javascript
调试Node.JS的辅助工具(NodeWatcher)
Jan 04 Javascript
JavaScript地图拖动功能SpryMap的简单实现
Jul 17 Javascript
jscript读写二进制文件的方法
Apr 22 Javascript
老生常谈 js中this的指向
Jun 30 Javascript
thinkjs之页面跳转同步异步操作
Feb 05 Javascript
Vue.js原理分析之observer模块详解
Feb 17 Javascript
js实现楼层导航功能
Feb 23 Javascript
jQuery实现的简单对话框拖动功能示例
Jun 05 jQuery
如何优雅的在一台vps(云主机)上面部署vue+mongodb+express项目
Jan 20 Javascript
vue中在vuex的actions中请求数据实例
Nov 08 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
用Socket发送电子邮件
2006/10/09 PHP
利用curl 多线程 模拟 并发的详解
2013/06/14 PHP
php 中文字符串首字母的获取函数分享
2013/11/04 PHP
PHP Session机制简介及用法
2014/08/19 PHP
跟我学Laravel之路由
2014/10/15 PHP
php开启与关闭错误提示适用于没有修改php.ini的权限
2014/10/16 PHP
php实现映射操作实例详解
2019/10/02 PHP
jQuery.validate 常用方法及需要注意的问题
2013/03/20 Javascript
JS限制Textarea文本域字符个数的具体实现
2013/08/02 Javascript
IE中JS跳转丢失referrer问题的2个解决方法
2014/07/18 Javascript
node.js中的fs.openSync方法使用说明
2014/12/17 Javascript
javascript面向对象之对象的深入理解
2015/01/13 Javascript
Javascript基础教程之break和continue语句
2015/01/18 Javascript
关于Vue.js一些问题和思考学习笔记(2)
2016/12/02 Javascript
jquery 判断div show的状态实例
2016/12/03 Javascript
AngularJS1.X学习笔记2-数据绑定详解
2017/04/01 Javascript
JS实现图片居中悬浮效果
2017/12/25 Javascript
Bootstrap 模态框多次显示后台提交多次BUG的解决方法
2017/12/26 Javascript
解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题
2020/09/11 Javascript
微信小程序实现电影App导航和轮播
2020/11/30 Javascript
Python中将字典转换为列表的方法
2016/09/21 Python
Python开发微信公众平台的方法详解【基于weixin-knife】
2017/07/08 Python
pycharm恢复默认设置或者是替换pycharm的解释器实例
2018/10/29 Python
实例讲解Python脚本成为Windows中运行的exe文件
2019/01/24 Python
Python HTML解析模块HTMLParser用法分析【爬虫工具】
2019/04/05 Python
处理Selenium3+python3定位鼠标悬停才显示的元素
2019/07/31 Python
Django Admin后台添加数据库视图过程解析
2020/04/01 Python
Python Matplotlib简易教程(小白教程)
2020/07/28 Python
html5定制表单_动力节点Java学院整理
2017/07/11 HTML / CSS
StubHub哥伦比亚:购买和出售您的门票
2016/10/20 全球购物
Fossil美国官网:Fossil手表、手袋、珠宝及配件
2017/02/01 全球购物
Gap加拿大官网:Gap Canada
2017/08/24 全球购物
为什么Runtime.exec(“ls”)没有任何输出?
2014/10/03 面试题
反四风个人对照检查材料
2014/09/26 职场文书
2015年员工工作总结范文
2015/04/08 职场文书
Java常用函数式接口总结
2021/06/29 Java/Android