带按钮栏的离子滑动框

Question

我有一个带 4 个载玻片的离子载玻片盒。您可以通过单击屏幕底部的按钮在幻灯片之间切换。当相应的幻灯片处于活动状态时，如何将 class 'active'（使用 AngularJS）添加到按钮？

例如，如果第二张幻灯片处于活动状态，我希望第二个按钮具有 class 'active'。当您移动到第三张幻灯片时（通过单击第三个按钮或滑动屏幕），class 'active' 将从第二个按钮中删除并添加到第三个按钮。

这是我的代码：

menu.html

<ion-view view-title="Menu">

    <ion-content class="padding">

        <ion-slide-box on-slide-changed="activateTabs($index)">

            <ion-slide>
                <h1> Slide 1 </h1>
            </ion-slide>

            <ion-slide>
                <h1> Slide 2 </h1>
            </ion-slide>

            <ion-slide>
                <h1> Slide 3 </h1>
            </ion-slide>

            <ion-slide>
                <h1> Slide 4 </h1>
            </ion-slide>

        </ion-slide-box>

    </ion-content>

    <div class="button-bar">
        <a class="button button-stable" ng-click="slide(0)">1</a>
        <a class="button button-stable" ng-click="slide(1)">2</a>
        <a class="button button-stable" ng-click="slide(2)">3</a>
        <a class="button button-stable" ng-click="slide(3)">4</a>
    </div>

</ion-view>

MenuCtrl.js

myApp

.controller('MenuCtrl', function($scope, $stateParams, $ionicSlideBoxDelegate){

    $scope.slide = function(to) {
        $scope.current = to;
        $ionicSlideBoxDelegate.slide(to);
    }

});

Answer 1

您可以通过在控制器中定义按钮来实现此目的，因此您可以使用 $index 有条件地将 class 添加到具有 ng-class 的对象。

您的代码如下所示。

HTML

在您的 html 中添加 ng-repeat & ng-class。

当您点击一个按钮时，$scope.current 将与该特定按钮的 $index 相同。因此 ng-class 只会将 class active 添加到单击的按钮。

<div class="button-bar">
    <a ng-repeat="button in buttons"
       ng-class="{'active': $index === current}"
       ng-click="slide($index)"
       class="button button-stable">{{ button.name }}</a>
</div>

控制器

用 $scope.buttons 定义你的按钮在你的控制器里。

myApp

.controller('MenuCtrl', function($scope, $stateParams, $ionicSlideBoxDelegate){

    $scope.buttons = [
        { name: '1' },
        { name: '2' },
        { name: '3' },
        { name: '4' }
    ];

    $scope.slide = function(to) {
        $scope.current = to;
        $ionicSlideBoxDelegate.slide(to);
    }

});

CSS

现在你需要在你的 css 某处定义一个 class .active，因为我们在你的 html 中用 ng-class 指令声明了它（ 'active').

ng-class="{'active': $index === current}"

带按钮栏的离子滑动框

Ionic slide box with button bar

slideshow

slide

angularjs

ionic-framework

ionic