ionic+做一个侧滑跳转+标题头旁边有一个后退功能的按钮

最新推荐文章于 2021-05-28 18:16:45 发布

原创最新推荐文章于 2021-05-28 18:16:45 发布 · 800 阅读

0 ·

CC 4.0 BY-SA版权

html5 专栏收录该内容

31 篇文章

订阅专栏

本文介绍了一个使用Ionic框架构建的应用实例，展示了如何通过Angular模块定义不同的页面状态，并利用HTML5及Ionic组件实现页面间的导航和内容展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>Title</title>
    <link href="lib/css/ionic.css" rel="stylesheet">
    <script src="lib/js/ionic.bundle.min.js"></script>
    <script>
        var app = angular.module('myApp', ['ionic']);
        app.config(function($stateProvider,$urlRouterProvider) {
            $stateProvider
                .state('index', {
                    url: '/',
                    templateUrl: 'pages/home.html'
                })
                .state('music', {
                    url: '/music',
                    templateUrl: 'pages/music.html'
                }) .state('details', {
                url: '/details',
                templateUrl: 'pages/details.html'
            });
            $urlRouterProvider.otherwise("/")
        });


    </script>
</head>
<body ng-app="myApp">
<ion-nav-bar class="assertive-bg">
    <ion-nav-back-button >
        <i class="ion-arrow-left-c"></i>后退
    </ion-nav-back-button>
</ion-nav-bar>


<ion-nav-view animation="slide-left-right">
    <!-- 中间内容 -->
</ion-nav-view>


</body>
</html>


details
<!-- ion-view的标题会在导航栏显示 -->
<ion-view title="detail">
    <ion-content >
        <!-- 页面的内容 -->
       <p>详情页！</p>
    </ion-content>
</ion-view>

music

<!-- ion-view的标题会在导航栏显示 -->
<ion-view title="Music">
    <ion-content >
        <!-- 页面的内容 -->
        <a href="#/home">跳转到home页面！!</a>
    </ion-content>
</ion-view>


home
<!-- ion-view的标题会在导航栏显示 -->
<ion-view title="Home">
    <ion-content >
        <!-- 页面的内容 -->
        <a href="#/music">跳转到音乐页面！!</a>
        <!--<a href="#/details">跳转到详情页面！</a>-->
        <button ui-sref="details">详情页！</button>
    </ion-content>
</ion-view>