左侧边栏点击不同的item让content显示不同的内容

最新推荐文章于 2024-08-28 11:42:46 发布

jizhangzhi

最新推荐文章于 2024-08-28 11:42:46 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

文章标签： ionic左侧边栏点击不同的item让c

本文链接：https://blog.youkuaiyun.com/jizhangzhi/article/details/50350864

本文介绍如何在Ionic应用中实现左侧边栏菜单，通过点击不同的item，动态加载并显示不同的内容区域，提升用户体验。

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

var app=angular.module('starter', ['ionic'])

 .controller("todo",function($scope,$state){
   
    $scope.go = function(az){
      $state.go(az);
    };
  });
app.config(function($stateProvider) {
  $stateProvider
    .state("novel", {
      templateUrl: "novel.html"
    })
    .state("main", {
      templateUrl: "main.html"
    });
})

<body ng-controller="todo">
  <ion-side-menus>
  <pre name="code" class="html"><!--           左侧边栏           -->

<ion-side-menu side="left" width="240" type="text/ng-template"> <div class="bar bar-header bar-positive"> <h1 class="title">xxxx</h1> </div> <div class="scroll-content has-header"> <div class="list list-inset"> <div class="item item-icon-left item-icon-right " ng-click="go('novel')"> <i class="icon ion-speakerphone"></i> <h2>AA</h2> <i class="icon ion-ios-arrow-right"></i> </div> <div class="item item-icon-left item-icon-right" ng-click="go('main')"> <i class="icon ion-ios-compose-outline"></i> <h2 >BB</h2> <i class="icon ion-ios-arrow-right"></i> </div> </div> </div> </ion-side-menu> <ion-side-menu-content class="calm-bg" > <ion-nav-view> <ion-header-bar class="royal-bg"> <a menu-toggle="left" class="button icon ion-navicon" ></a> <h1 class="title">AA</h1> </ion-header-bar> </ion-nav-view> </ion-side-menu-content>
</ion-side-menus><script id="novel.html" type="text/ng-template"> <ion-header-bar class="royal-bg"> <a menu-toggle="left" class="button icon ion-navicon" ></a> <h1 class="title">AA</h1> </ion-header-bar></script>

<script id="main.html" type="text/ng-template">
  <ion-header-bar class="royal-bg">
    <a menu-toggle="left" class="button icon ion-navicon" ></a>
    <h1 class="title">BB</h1>
  </ion-header-bar>
</script>