Ionic中Button Bar作Tab栏：点击切换内容的实现咨询

当然可以实现这个需求啦！看你的代码用的是AngularJS版本的Ionic，咱们可以用Angular的指令轻松搞定内容切换——要么隐藏轮播显示新页面，要么直接替换内容，两种方式都可行。下面给你一步步拆解实现方法：

1. 给页面添加控制器逻辑 #

首先得在对应页面的控制器里定义状态变量，用来跟踪当前要显示的内容，再写个切换方法。比如默认让轮播显示，点击按钮时切换到对应内容：

angular.module('你的应用模块名').controller('Page1Ctrl', function($scope) {
  // 默认显示图片轮播
  $scope.activeContent = 'slider';
  
  // 切换内容的方法，接收要显示的内容类型
  $scope.switchContent = function(contentType) {
    $scope.activeContent = contentType;
  };
});

2. 修改HTML模板，添加切换逻辑 #

接下来修改你的页面模板，给轮播和新内容区块加上显示控制指令，再给底部按钮绑定点击事件：

<ion-view id="page1" view-title="{{ logo }}" style="background-color:#f1f1f1;">
  <ion-nav-bar>
    <ion-nav-buttons side="right">
      <button id="page-button5" class="button buttonhome" style="background: transparent; border: 0;">
        <img class="home" src="img/finalimages/home.png">
      </button>
    </ion-nav-buttons>
  </ion-nav-bar>
  
  <ion-content padding="false" style="background-color:#f1f1f1;">
    <!-- 图片轮播：只有activeContent为'slider'时显示 -->
    <ion-slides 
      ng-show="activeContent === 'slider'"
      disable-side-menu-drag="" 
      options="{'loop': true}" 
      slider="slider1" 
      delegate-handle="slider1" 
      id="page-slider1" 
      style="width: 100%; ">
      <ion-slide-page id="page-slide28" style="background:url(&quot;img/swipeHome1.png&quot;) no-repeat center;background-size:cover;"></ion-slide-page>
      <ion-slide-page id="page-slide27" style="background:url(&quot;img/avfsZwJT9WGsBj982ul1_kitten1.jpg&quot;) no-repeat center;background-size:cover;"></ion-slide-page>
      <ion-slide-page id="page-slide29" style="background:url(&quot;img/WE6rB9dZRTiIWQlP5qsA_kitten3.jpg&quot;) no-repeat center;background-size:cover;"></ion-slide-page>
    </ion-slides>
    
    <!-- 电子竞技页面内容：点击对应按钮后显示 -->
    <div ng-show="activeContent === 'esports'" class="content-block">
      <h3>电子竞技专区</h3>
      <p>这里可以放你想要的任何HTML内容，比如赛事列表、新闻资讯、视频链接等等~</p>
      <!-- 可以根据需求添加更多自定义元素 -->
    </div>
    
    <!-- 运动赛事页面内容 -->
    <div ng-show="activeContent === 'sports'" class="content-block">
      <h3>运动赛事专区</h3>
      <p>在这里展示各类运动赛事的赛程、结果、报名入口等信息。</p>
    </div>
    
    <!-- 优惠页面内容 -->
    <div ng-show="activeContent === 'discount'" class="content-block">
      <h3>最新优惠活动</h3>
      <p>把你的优惠券、折扣信息都放在这里吧！</p>
    </div>
    
    <!-- 底部按钮栏：给每个按钮绑定切换事件 -->
    <div id="page-button-bar2" class="button-bar">
      <div style="display: inline;">
        <button 
          id="page-button11" 
          ng-click="switchContent('esports')"
          style="font-size:12px; background: #f1f1f1 !important; border: 0;" 
          class="button button-stable button-block bottommenu">
          <img class="wallet" src="img/finalimages/wallet.png">
          <h6 style="margin-top: -10px!important; color: #808080; position: left left">电子竞技</h6>
        </button>
      </div>
      <div style="display: inline;">
        <button 
          id="page-button12" 
          ng-click="switchContent('esports')"
          style="font-size:12px; background: #f1f1f1 !important; border: 0;" 
          class="button button-stable button-block bottommenu">
          <img class="esports" src="img/finalimages/joystick.png">
          <h6 style="margin-top: -10px!important; color: #808080; position: left left">电子竞技</h6>
        </button>
      </div>
      <div style="display: inline;">
        <button 
          id="page-button13" 
          ng-click="switchContent('sports')"
          style="font-size:12px; background: #f1f1f1 !important; border: 0;" 
          class="button button-stable button-block bottommenu">
          <img class="events" src="img/finalimages/s-ball.png">
          <h6 style="margin-top: -10px!important; color: #808080;">运动赛事</h6>
        </button>
      </div>
      <div style="display: inline;">
        <button 
          id="page-button14" 
          ng-click="switchContent('discount')"
          style="font-size:12px; background: #f1f1f1 !important; border: 0;" 
          class="button button-stable button-block bottommenu">
          <img class="discount" src="img/finalimages/gift.png">
          <h6 style="margin-top: -10px!important; color: #808080;">优惠</h6>
        </button>
      </div>
      <div class="dropdown">
        <button 
          id="page-button15" 
          ng-click="toggleInfo()" 
          class="button button-stable button-block bottommenu" 
          style="font-size:12px; background: #f1f1f1 !important; border: 0; ">
          <img class="information" src="img/finalimages/icon-menu.png">
          <h6 style="margin-top: -10px!important; color: #808080; ">资讯</h6>
        </button>
        <div class="dropdown-content dropdown-content-up-info" ng-show="IsInfoVisible">
          <a href="#">关於我们</a>
          <a href="#">联系我们</a>
          <a href="#">用户协议</a>
        </div>
      </div>
    </div>
  </ion-content>
</ion-view>

3. 额外优化建议 #

• 显示指令选择：上面用的是ng-show，它是通过CSS隐藏元素，DOM仍然保留；如果你的内容区块很复杂，想节省内存，可以换成ng-if，它会直接添加/移除DOM元素，切换时会重新渲染内容。
• 样式优化：给内容区块加个基础样式，避免内容紧贴边缘：

  .content-block {
    padding: 16px;
    background-color: #f1f1f1;
  }
  

• 路由关联：别忘了给你的page1视图在路由配置里指定控制器，比如：

  .state('page1', {
    url: '/page1',
    templateUrl: 'templates/page1.html',
    controller: 'Page1Ctrl'
  })
  

这样点击底部按钮时，轮播就会隐藏，对应的页面内容就会显示出来啦！

内容的提问来源于stack exchange，提问作者Sydnie