html5_ionic路由+侧滑栏

最新推荐文章于 2021-06-19 13:24:33 发布
原创 最新推荐文章于 2021-06-19 13:24:33 发布 · 701 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一个使用Ionic框架实现的底部标签切换导航案例，详细展示了如何通过AngularJS配置不同标签对应的视图及其路由，同时提供了完整的HTML结构及JavaScript代码。
<!DOCTYPE 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.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>
    <title>路由-标签切换</title>
    <script type="text/javascript">
        var app = angular.module("myApp", ["ionic"]);


        app.config(function ($stateProvider, $urlRouterProvider) {
            $stateProvider.state("home", {
                url: "/home",
                views: {
                    "views-home": {
                        templateUrl: "home.html"
                    }
                }
            }).state("cart", {
                url: "/cart",
                views: {
                    "views-cart": {
                        templateUrl: "cart.html"
                    }
                }
            }).state("mine", {
                url: "/mine",
                views: {
                    "views-mine": {
                        templateUrl: "mine.html"
                    }
                }
            });
        });


        app.controller("myCtrl", function ($scope, $ionicSideMenuDelegate) {
            $scope.toggleLeft = function () {
                $ionicSideMenuDelegate.toggleLeft();
            };
        });
    </script>
</head>
<body ng-controller="myCtrl">
<ion-side-menus>
    <!-- 中间内容 -->
    <ion-side-menu-content>
        <ion-nav-view name="views-home"></ion-nav-view>
    </ion-side-menu-content>


    <!-- 左侧菜单 -->
    <ion-side-menu side="left">
        <ion-header-bar class="bar-positive">
            <h1 class="title">左侧</h1>
            <button class="button button-icon ion-ios-arrow-left" ng-click="toggleLeft()"></button>
        </ion-header-bar>


        <ion-content class="has-header">
            这是“侧边栏”页面HTML内容
        </ion-content>
    </ion-side-menu>
</ion-side-menus>


<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-tab>


    <ion-tab title="购物车" icon-on="ion-ios-cart" icon-off="ion-ios-cart-outline" ui-sref="cart">
        <ion-nav-view name="views-cart"></ion-nav-view>
    </ion-tab>


    <ion-tab title="我的" icon-on="ion-ios-person" icon-off="ion-ios-person-outline" ui-sref="mine">
        <ion-nav-view name="views-mine"></ion-nav-view>
    </ion-tab>
</ion-tabs>


<script id="home.html" type="text/ng-template">
    <ion-header-bar class="bar-positive">
        <button class="button button-clear" ng-click="toggleLeft()">左按钮</button>
        <h1 class="title">首页</h1>
    </ion-header-bar>


    <ion-content class="has-header">
        这是“首页”页面HTML内容
    </ion-content>
</script>


<script id="cart.html" type="text/ng-template">
    <ion-header-bar class="bar-positive">
        <h1 class="title">购物车</h1>
        <button class="button button-clear">右按钮</button>
    </ion-header-bar>


    <ion-content class="has-header">
        这是“购物车”页面HTML内容
    </ion-content>
</script>


<script id="mine.html" type="text/ng-template">
    <ion-header-bar class="bar-positive">
        <h1 class="title">我的</h1>
        <button class="button button-icon ion-ios-more"></button>
    </ion-header-bar>


    <ion-content class="has-header">
        这是“我的”页面HTML内容
    </ion-content>
</script>
</body>
</html>
绅V科技
关注
Ionic-app.zip_app6189_guidetz9_ionic_ionic app网址_zip
09-20
它提供了一整套 UI 组件，如导航、侧滑菜单、卡片等，使得开发者可以使用 HTML、CSS 和 JavaScript 进行移动应用开发，同时利用 Cordova 或 Capacitor 实现原生功能的集成。标题中的 "Ionic-app.zip" 很可能是一个...
ionic3+angular5 webapp
04-02
在本文中，我们将深入探讨如何使用Ionic 3和Angular 5构建一个类似京东商城的Web应用程序。 Ionic是一个基于Angular的开源框架，专为构建混合移动应用程序而设计，但同样适用于Web应用开发。Angular则是一个强大的...
HTML ionic侧滑菜单
遗声落西秦
12-15 512
侧拉菜单的使用 angular.module("ionicApp", ["ionic"]).controller("democ", function($scope, $ionicSideMenuDelegate) { $scope.toggleLeftSideMenu = function() { $ionicSideMenuDelegate.toggle
AngularJS+页面切换+侧滑
Logitech12的博客
10-23 1533
html> html lang="en"> head> meta charset="UTF-8"> title>Titletitle> style> *{ margin: 0 auto; } body{ position: relative; }
用ionic(选项卡栏tab) icon(图标) ionic上拉菜单(ActionSheet) 实现通讯录界面切换操作
IT666DHW的博客
10-20 1183
html> html lang="en"> head> meta charset="UTF-8"> title>用ionic(选项卡栏) icon(图标)实现通讯录界面切换操作title> link rel="stylesheet" href="../ionic/css/ionic.css"> script src="../ionic/js/ionic.bundl
ionic的ion-tabs和ion-side-menus
大笨儿钟的博客
06-05 752
最近在使用ionic做一个简单的app时，同时使用了标签和，效果就是4个标签页，其中第二个标签页有一个侧边栏可以拉，效果图如下 点击按钮后可以调出侧边栏，点击侧边栏的选项可以调出新的视图，代码大概如下 class="tabs-icon-top tabs-positive"> title="首页" icon="ion-home" href="#/tab/home"> n
Ionic基础——侧边栏ion-side-menus 以及ion-tap结合侧边栏详解
热门推荐
bboyjoe的博客
02-17 1万+
一． 侧边栏菜单 : ion-side-menus 侧边栏菜单是一个最多包含三个子容器的元素： 默认情况下，侧边栏菜单将只显示ion-side-menu-content容器的内容。 向左滑动时，将显示右边栏ion-side-menu容器的内容，向右滑动时，将显示左边栏 ion-side-menu容器的内容。 在ionic中，使用ion-side-menus指令定义侧边栏菜单：
ionic-侧滑-路由
Rbh73692的博客
10-22 379
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
angular_ionic旅店助手天气房间情况查询源码_无扩展包
03-28
在这里，你会看到`<ion-app>`和`<ion-nav-view>`等Ionic特定的元素，它们用于构建页面路由和视图导航。 2. **views**：这个目录包含了应用程序的不同视图，如酒店列表、天气详情等。这些视图通常由Ionic的`.html`...
ionic side menu侧滑效果
04-03
"ionic side menu侧滑效果"指的是如何在Ionic应用中实现一个可以滑动显示或隐藏的菜单，通常用于放置应用的主要导航选项。 1. ** Ionic Framework 概述：** Ionic 是基于Angular框架构建的，它提供了一系列的UI...
ionic+angular的PDF
11-28
Ionic 提供了一系列美观的 UI 组件，如导航栏、侧滑菜单、卡片等，使得开发者能够快速搭建出与原生应用相媲美的用户界面。同时，Ionic 还利用 Cordova 或 Capacitor 进行设备访问，这意味着开发者可以用 Web 技术...
html5 侧滑菜单,侧滑菜单
weixin_39914863的博客
06-19 458
赞同来自:请使用自定义事件来实现页面间传值。[自定义事件](http://dev.dcloud.net.cn/mui/event/#customevent)见详细代码如下：首页```javascript请使用自定义事件来实现页面间传值。[自定义事件](http://dev.dcloud.net.cn/mui/event/#customevent)见详细代码如下：首页```javascript标题首...
html5+ 侧滑窗口
代码简单说 Vue、JAVA、PHP、Node.js 熟练运用，接口、架构、性能全搞定。
10-10 2738
&amp;lt;!DOCTYPE HTML&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;utf-8&quot; /&amp;gt; &amp;lt;meta name=&quot;viewport&quot; content=&quot;initial-scale=1
贪心算法详解[项目源码]
11-24
贪心算法是一种在每一步选择中都采取当前状态下最优的选择，以期最终获得全局最优解的启发式算法。其核心思想是“走一步看一步，每步都选最好的，不回头”。与动态规划不同，贪心算法不依赖历史决策，通过局部最优积累直接推导全局最优。适用贪心算法的问题必须满足贪心选择性质和最优子结构性质。文章详细介绍了贪心算法的定义、适用条件、解题步骤，并通过经典问题（如活动选择、哈夫曼编码、Dijkstra算法、Kruskal算法）的C++实现进行说明。最后对比了贪心算法与动态规划的差异，并总结了贪心算法的优缺点及应用场景。
【四轴飞行器】非线性三自由度四轴飞行器模拟器研究（Matlab代码实现）
11-24
【四轴飞行器】非线性三自由度四轴飞行器模拟器研究（Matlab代码实现）内容概要：本文围绕非线性三自由度四轴飞行器的建模与仿真展开，重点介绍了基于Matlab的飞行器动力学模型构建与控制系统设计方法。通过对四轴飞行器非线性运动方程的推导，建立其在三维空间中的姿态与位置动态模型，并采用数值仿真手段实现飞行器在复杂环境下的行为模拟。文中详细阐述了系统状态方程的构建、控制输入设计以及仿真参数设置，并结合具体代码实现展示了如何对飞行器进行稳定控制与轨迹跟踪。此外，文章还提到了多种优化与控制策略的应用背景，如模型预测控制、PID控制等，突出了Matlab工具在无人机系统仿真中的强大功能。; 适合人群：具备一定自动控制理论基础和Matlab编程能力的高校学生、科研人员及从事无人机系统开发的工程师；尤其适合从事飞行器建模、控制算法研究及相关领域研究的专业人士。; 使用场景及目标：①用于四轴飞行器非线性动力学建模的教学与科研实践；②为无人机控制系统设计（如姿态控制、轨迹跟踪）提供仿真验证平台；③支持高级控制算法（如MPC、LQR、PID）的研究与对比分析； 阅读建议：建议读者结合文中提到的Matlab代码与仿真模型，动手实践飞行器建模与控制流程，重点关注动力学方程的实现与控制器参数调优，同时可拓展至多自由度或复杂环境下的飞行仿真研究。
Lua脚本语言学习笔记[项目源码]
11-24
本文介绍了Lua脚本语言的基本概念、优势及实际应用。首先解释了脚本语言的定义，即解释运行而非编译的计算机语言，以文本形式保存并在调用时解释或编译。接着详细阐述了使用Lua的四大优势：提高工作效率、增强创造性、增加扩展性以及其轻量级特性。此外，文章还提供了在Windows上配置Lua运行和开发环境的步骤，包括安装LuaForWindows、配置IDE目录以及编写和运行简单的Lua脚本。最后，通过示例代码展示了如何在C/C++程序中与Lua脚本交互，包括调用Lua函数和处理返回值，为开发者提供了实用的技术指导。
SpringBoot Ftp 文件下载客户端工程源码
最新发布
11-24
基于SpringBoot3开发的Ftp文件批量全自动下载客户端源码。 使用Java语言开发，命令行程序，可作为在后台运行，基于配置文件fprc.yml配置运行时参数。 经过7X24小时测试，可保证持久运行。 能够在
html5游戏源码点击夜空欣赏烟花
11-24
html5游戏源码点击夜空欣赏烟花
OSPF虚电路与路由过滤实验[项目代码]
11-24
该实验详细介绍了如何通过OSPF虚电路连接不连续的区域0以及将非骨干区域连接到区域0的配置方法。实验场景模拟了公司网络合并后，通过虚电路实现网络互联，解决不连续区域0和区域3与区域0无直接连接的问题。配置步骤包括设备IP地址设置、多区域OSPF配置、虚电路建立以及路由过滤控制。特别强调了使用固定地址作为Router-ID，并通过ACL实现特定网段路由信息的发布控制，确保R1能学习到10.0.4.0/24网段路由，而其他设备无法获取。实验内容全面，涵盖了OSPF虚电路和路由过滤的核心技术点。
Ionic侧滑菜单实现与导航演示
- 通过配置路由和菜单状态，可以实现侧滑菜单和页面导航的无缝整合。 7. **兼容性和最佳实践**： - 由于Ionic使用了现代Web技术，开发者需要注意兼容性问题，尤其是旧版浏览器对Web组件的支持。 - 在开发时应该...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值