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

来源：互联网发布：php chmod 777 编辑：程序博客网时间：2024/05/02 10:36
<!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>
阅读全文
0 0