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 按回车键相应按钮提交事件
Nov 02 Javascript
基于JavaScript制作霓虹灯文字 代码 特效
Sep 01 Javascript
Vue.js每天必学之指令系统与自定义指令
Sep 07 Javascript
angular实现IM聊天图片发送实例
May 08 Javascript
JS实现自定义状态栏动画文字效果示例
Oct 12 Javascript
关于Webpack dev server热加载失败的解决方法
Feb 22 Javascript
基于node简单实现RSA加解密的方法步骤
Mar 21 Javascript
Vue的H5页面唤起支付宝支付功能
Apr 18 Javascript
使用 js 简单的实现 bind、call 、aplly代码实例
Sep 07 Javascript
小程序自定义模板实现吸顶功能
Jan 08 Javascript
JavaScript正则表达式验证登录实例
Mar 18 Javascript
elementui更改el-dialog关闭按钮的图标d的示例代码
Aug 04 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
2006/11/25 PHP
PHP 缓存实现代码及详细注释
2010/05/16 PHP
解析百度搜索结果link?url=参数分析 (全)
2012/10/09 PHP
浅析php与数据库代码开发规范
2013/08/08 PHP
PHP header()函数常用方法总结
2014/04/11 PHP
php针对cookie操作的队列操作类实例
2014/12/10 PHP
php获取客户端IP及URL的方法示例
2017/02/03 PHP
In Javascript Class, how to call the prototype method.(three method)
2007/01/09 Javascript
jQuery Ajax之load()方法
2009/10/12 Javascript
js格式化时间小结
2014/11/03 Javascript
jQuery实现可展开合拢的手风琴面板菜单
2015/09/15 Javascript
javascript轻量级库createjs使用Easel实现拖拽效果
2016/02/19 Javascript
js判断鼠标位置是否在某个div中的方法
2016/02/26 Javascript
根据Bootstrap Paginator改写的js分页插件
2016/12/25 Javascript
vue.js利用Object.defineProperty实现双向绑定
2017/03/09 Javascript
详解打造 Vue.js 可复用组件
2017/03/24 Javascript
vue项目打包部署到服务器的方法示例
2018/08/27 Javascript
Angular Material Icon使用详解
2018/11/07 Javascript
[02:33]2014DOTA2 TI每日综述 LGD涉险晋级DK闯入胜者组
2014/07/14 DOTA
[00:19]CN DOTA NEVER DIE!VG夺冠rOtK接受采访
2019/12/23 DOTA
Python优化技巧之利用ctypes提高执行速度
2016/09/11 Python
对python 命令的-u参数详解
2018/12/03 Python
pytorch 在网络中添加可训练参数,修改预训练权重文件的方法
2019/08/17 Python
pytorch之Resize()函数具体使用详解
2020/02/27 Python
基于python纯函数实现井字棋游戏
2020/05/27 Python
经验丰富程序员才知道的8种高级Python技巧
2020/07/27 Python
Python 如何调试程序崩溃错误
2020/08/03 Python
如何将anaconda安装配置的mmdetection环境离线拷贝到另一台电脑
2020/10/15 Python
python输出国际象棋棋盘的实例分享
2020/11/26 Python
什么是跨站脚本攻击
2014/12/11 面试题
大学在校生求职信范文
2013/11/21 职场文书
特色冷饮店创业计划书
2014/01/28 职场文书
2014年党课学习心得体会
2014/07/08 职场文书
三人合伙协议书范本
2014/10/29 职场文书
辩论赛开场白大全(主持人+辩手)
2015/05/29 职场文书
宾馆客房管理制度
2015/08/06 职场文书