微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

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

1、Html

rush:xhtml;">

{{item.text}}


  • {{item.text}}

  • 2、Controller

    rush:js;"> 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

    rush: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、效果

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

    版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

    相关推荐