ionic各种模板

最新推荐文章于 2024-03-28 09:31:22 发布
最新推荐文章于 2024-03-28 09:31:22 发布
阅读量2.3k 收藏
点赞数
分类专栏： 4月Android hybrid跨平台开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40087072/article/details/78295785
版权


第一个模板

三个页面点击跳转

<!DOCTYPE html>
<html ng-app="BShop">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <link href="lib/css/ionic.css" rel="stylesheet">
    <script type="text/javascript" src="lib/js/ionic.bundle.js"></script>
    <link href="css/main.css" rel="stylesheet">
    <title>书店</title>
    <script type="text/javascript">
      var BShop= angular.module("BShop",["ionic"]);
      BShop.config(function ($stateProvider, $urlRouterProvider) {
          $stateProvider.state("home", {
              url: "/home",
              views: {
                  "view-home": {
                      templateUrl: "views/home/home.html",

                  }
              }
          }).state("cart", {
              url: "/cart",
              views: {
                  "view-cart": {
                      templateUrl: "views/cart/cart.html",
                  }
              }
          }).state("mine", {
              url: "/mine",
              views: {
                  "view-mine": {
                      templateUrl: "views/mine/mine.html",
                  }
              }
          });

          $urlRouterProvider.otherwise("home");
      });


    </script>
</head>
<body>

//如果要显示头标必须写

 <ion-nav-bar></ion-nav-bar>

 <ion-tabs class="tabs-positive tabs-icon-top">

    <ion-tab title="首页" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline" ui-sref="home">
        <ion-nav-view name="view-home"></ion-nav-view>
        <!-- 标签 1 内容 -->
    </ion-tab>

    <ion-tab title="购物车" icon-on="ion-ios-cart" icon-off="ion-ios-cart-outline" ui-sref="cart">
        <ion-nav-view name="view-cart"></ion-nav-view>
        <!-- 标签 2 内容 -->
    </ion-tab>

    <ion-tab title="我的" icon-on="ion-ios-person" icon-off="ion-ios-person-outline" ui-sref="mine">
        <ion-nav-view name="view-mine"></ion-nav-view>
        <!-- 标签 3 内容 -->
    </ion-tab>
</ion-tabs>
</body>

</html>


2.头标展示


<ion-view title="个人中心">
//小图标 ...
 <ion-nav-buttons side="right">
        <button class="button button-icon ion-ios-compose-outline" ng-click="toggleLeft()"></button>
    </ion-nav-buttons>

    <ion-content>

    </ion-content>
</ion-view>



3.样式展示


.home .picture {
    float: left;
}

.home .details h3 {
    margin-top: 16px;
}

.home .details div {
    margin-top: 48px;
}

.home .details span {
    color: red;
    font-size: large;
}

.home .details .ion-ios-cart {
    position: absolute;
    right: 16px;
}

.cart .picture {
    float: left;
}

.cart .details h3 {
    margin-top: 16px;
    color: red;
    font-size: large;
}

.cart .details div {
    margin-top: 16px;
}

.cart .details div .ion-android-delete {
    position: absolute;
    right: 16px;
}

.cart .item {
    border-width: 0;
}

.cart hr {
    border: 1px dotted #999;
    margin-left: 12px;
    margin-right: 12px;
}

.mine .avatar {
    width: 100%;
    height: 160px;
    background: url("../img/mine_bg.jpg") no-repeat;
    background-size: cover;
    text-align: center;
}

.mine .avatar img {
    border-radius: 50%;
    margin-top: 30px;
}

 4.分页面列表展示

<ion-view title="首页" class="home">

//左侧图标
    <ion-nav-buttons side="left">
        <button class="button button-icon ion-ios-more" ng-click="toggleLeft()"></button>
    </ion-nav-buttons>

    <ion-content >
//下拉刷新
 <ion-refresher pulling-text="下拉刷新" on-refresh="doRefresh()"></ion-refresher>
        <ion-list>
            <ion-item >
            <div class="picture">
                <img ng-src="img/book_01.jpg" width="128px" height="128px">
            </div>
            <div class="details">
                <h2>Java编程思想</h2>
                <h3>C++、Java中的圣经级著作</h3>
                <div>
                    <span>{{86.40|currency:"￥"}}</span>
                    <i class="icon ion-ios-cart"></i>
                </div>
            </div>
        </ion-item>

            <ion-item >
                <div class="picture">
                    <img ng-src="img/book_01.jpg" width="128px" height="128px">
                </div>
                <div class="details">
                    <h2>Java编程思想</h2>
                    <h3>C++、Java中的圣经级著作</h3>
                    <div>
                        <span>{{86.40|currency:"￥"}}</span>
                        <i class="icon ion-ios-cart"></i>
                    </div>
                </div>
            </ion-item>

            <ion-item >
                <div class="picture">
                    <img ng-src="img/book_01.jpg" width="128px" height="128px">
                </div>
                <div class="details">
                    <h2>Java编程思想</h2>
                    <h3>C++、Java中的圣经级著作</h3>
                    <div>
                        <span>{{86.40|currency:"￥"}}</span>
                        <i class="icon ion-ios-cart"></i>
                    </div>
                </div>
            </ion-item>

            <ion-item >
                <div class="picture">
                    <img ng-src="img/book_01.jpg" width="128px" height="128px">
                </div>
                <div class="details">
                    <h2>Java编程思想</h2>
                    <h3>C++、Java中的圣经级著作</h3>
                    <div>
                        <span>{{86.40|currency:"￥"}}</span>
                        <i class="icon ion-ios-cart"></i>
                    </div>
                </div>
            </ion-item>

            <ion-item >
                <div class="picture">
                    <img ng-src="img/book_01.jpg" width="128px" height="128px">
                </div>
                <div class="details">
                    <h2>Java编程思想</h2>
                    <h3>C++、Java中的圣经级著作</h3>
                    <div>
                        <span>{{86.40|currency:"￥"}}</span>
                        <i class="icon ion-ios-cart"></i>
                    </div>
                </div>
            </ion-item>

            <ion-item >
                <div class="picture">
                    <img ng-src="img/book_01.jpg" width="128px" height="128px">
                </div>
                <div class="details">
                    <h2>Java编程思想</h2>
                    <h3>C++、Java中的圣经级著作</h3>
                    <div>
                        <span>{{86.40|currency:"￥"}}</span>
                        <i class="icon ion-ios-cart"></i>
                    </div>
                </div>
            </ion-item>

        </ion-list>
    </ion-content>
</ion-view>


5.侧拉菜单的模板


<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>菜鸟教程(runoob.com)</title>
    <link href="https://cdn.bootcss.com/ionic/1.3.2/css/ionic.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/ionic/1.3.2/js/ionic.bundle.min.js"></script>
    <script type="text/javascript">
        angular.module('starter', ['ionic']);
    </script>

</head>

<body ng-app="starter">
<ion-nav-view></ion-nav-view>

<ion-side-menus>

    <ion-pane ion-side-menu-content>
        <ion-nav-bar class="bar-stable nav-title-slide-ios"></ion-nav-bar>
        <ion-nav-view animation="slide-left-right">

            <!-- 页面内容 -->
            <ion-content>
                <ion-list>
                    <ion-item>abc</ion-item>
                    <ion-item>def</ion-item>
                </ion-list>
            </ion-content>

        </ion-nav-view>
    </ion-pane>

    <ion-side-menu side="left">

        <header class="bar bar-header bar-stable">
            <h1 class="title">Left</h1>
        </header>

        <ion-content class="has-header">
            <ion-list>
                <ion-item nav-clear menu-close href="#/app/search">
                    Left1111
                </ion-item>
                <ion-item nav-clear menu-close href="#/app/browse">
                    Left2222
                </ion-item>
                <ion-item nav-clear menu-close href="#/app/playlists">
                    Left333
                </ion-item>
            </ion-list>
        </ion-content>

    </ion-side-menu>
</ion-side-menus>

</body>
</html>




阳光鬼怪
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
14个令人惊叹的Ionic应用程序模板
代码教主
06-22 944
过去，为不同的移动操作系统创建应用程序需要花费大量时间和精力。 现在，使用Ionic之类的工具要容易得多。 Ionic是使用流行的Angular框架创建现代，混合，移动应用程序的流行框架。 因为开发人员可以使用他们已经熟悉的技术（JavaScript，HTML和CSS），所以学习曲线对于为Android和iOS创建功能齐全的移动应用程序而言并不困难。 CodeCanyon上的Ionic应...
ionic 模板
07-29
由于最近研究ionic框架，深感这块的Demo寥寥可数，而大家又都藏私，堂堂天朝，何时才有百家争鸣之象，开源精神吾辈当仁不让！
11个最佳Ionic应用程序模板
代码教主
06-22 1022
如果您可以更快地创建客户的应用程序而不必从头开始编写代码怎么办？ Ionic应用程序模板是可能的。 应用程序模板为您提供了数百种预制的应用程序框架，您可以对其进行调整以适应客户的需求。 选择模板的一些好处包括： 减少编写应用程序的编码和设计工作 很多选项和功能 安装成本低 大量的插件可供选择 CodeCanyon上最好的离子应用程序模板 CodeCanyon是Ion...
ionic列表模板
nick_king的博客
03-27 765
ionic动态列表模板 话不多说，先看效果图片 自我感觉还是不错的，你们觉得呢，这里我用到了ionic的card组件，一个动态就是一个card，说实话把，我也是直接抄的官网的栗子：传送门，我只是在这个基础上添加了一个删除，实现了点赞，评论等功能，先贴代码吧： <ion-header> <ion-navbar color="primary"> <ion-t...
使用 ionic + cordova + vue3 实现相册选择、拍照，并上传、预览图片
Lyrelion的博客
10-26 1997
使用 ionic + cordova + vue3 实现相册选择、拍照，并上传、预览图片
ionic 购物车商城模板
06-01
`Ionic`的设计理念是“移动优先”，其组件和样式都是为触摸设备优化的，确保在各种屏幕尺寸上都能有良好的表现。 ### 2. 购物车功能实现 在`Ionic`购物车商城模板中，购物车功能是核心部分。这通常涉及到商品添加...
ionic 微博模板
04-07
ionic 微博模板
基于ionic3的项目基础模板
02-23
在本文中，我们将深入探讨基于Ionic 3的项目基础模板，这是一个用于快速搭建移动应用的框架，特别适合构建跨平台的原生应用。Ionic 3是Ionic框架的一个版本，它利用Angular作为其核心，提供了丰富的UI组件和工具，...
ionic应用实用模板
12-17
**Ionic应用实用模板详解** Ionic框架是开发跨平台移动应用的一种流行选择，它基于AngularJS，并结合了Cordova/PhoneGap技术，使得开发者能够用HTML、CSS和JavaScript编写原生感观的应用。在这个"ionic应用实用模板...
Ionic基础——ionic路由及内联模板
bboyjoe的博客
02-05 9472
一.ionic中路由管理介绍： 在单页应用中，路由的管理是很重要的环节。ionic.js没有使用AngularJS内置的ng-route路由，而是选择了AngularUI项目的ui-router模块。 ui-router的核心理念是将子视图集合抽象为一个状态机，导航以为着状态的切换。在不同的状态下，ionic.js渲染对应的子视图(动态加载的HTML片段)就实现了路由导航的功能。 二.ion
ionic手机框架模板
11-12
ionic收集模板，本人已测试完毕，绝对好用！
（注意：为ionic的基础模板代码）即时通讯聊天实例（cordova/phoneGap + ionic + Strophe.js + openfire)
03-28
cordova + ionic 创建的android版app，使用Strophe.js 实现xmpp客户端，实现了即时通讯聊天功能，服务端为openfire，需要自行搭建，应用可以实现账户登录，添加好友，聊天功能
ionic-template:作为 AppBuilder 项目的基本 ionic 模板
06-21
离子模板 作为 AppBuilder 项目的基本离子模板。 该模板与 Kendo UI TabStrip 示例非常相似，但使用了 Angular 和 Ionic 框架。
完整的Ionic项目实例
03-13
代码经过Cordova编译处理的，用于自学使用，如有需要，可以私信我（注：学习使用，保存资源，避免丢失）
使用Ionic打造的微信应用模板：Frogmarch's Ionic-WeChat
最新发布
gitblog_00077的博客
03-28 414
使用Ionic打造的微信应用模板：Frogmarch's Ionic-WeChat 项目地址:https://gitcode.com/Frogmarch/ionic-wechat 项目简介 在今天的移动开发领域，跨平台框架如React Native和Ionic已经成为了开发者们的首选工具。Frogmarch的Ionic-WeChat是一个开源项目，它基于流行的Ionic框架，为构建微信风格的应用提...
ionic搭建应用模板框架
ioniconline的博客
12-03 4909
您可自由转发此文， 但请保留出处：Ionic在线学习网站  http://www.ioniconline.com 环境搭建完，对ionic基本了解后，我们来搭个实用的应用框架。ionic提供了三个最常用的示例框架。方便你快速的进入项目开发。 如：sudo ionic start appname blank（sidemenu／tabs） 我们这边从一个空模版来建立应用，这样我们能够从零开始深刻
2019最佳Ionic应用程序模板
代码教主
06-21 528
Ionic是用于构建可在任何地方运行的出色跨平台应用程序的最受欢迎框架之一。 它使您可以创建可在所有设备上运行的应用程序，而无需考虑特定于平台的详细信息。 使Ionic更好的是它没有陡峭的学习曲线。 这意味着您可以快速入门。 您还可以通过使用一些2019年最佳的Ionic模板来显着减少开发时间。 所有这些功能丰富的应用程序模板都具有非常优美的设计，因此无论您要尝试创建什么应用程序，都看...
ionic购物车框架模板
xy8199的博客
10-20 1079
html> html ng-app="myApp"> head> meta charset="UTF-8"> meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> link href="https://cdn.bootcss
ionic 路由模板
下午茶的博客
10-20 458
向上图：  主要实现的效果如下 直接写个模板方面日后用： html> html lang="en"> head> meta charset="UTF-8"> title>Titletitle> meta name="viewport" content="width=device-width,minimum-scale=1.0,ma
ionic3种项目模板详解
10-29
3. sidemenu模板：sidemenu模板是一个带有侧边栏菜单的项目模板，适用于构建具有导航菜单和各种页面的应用程序。在sidemenu模板中，导航菜单将显示在应用程序的侧边栏上，并且可以通过点击菜单项来导航到不同的页面...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值