javascript - 在 ionic 框架中使用 ionic 滚动选择中间元素

Question

我正在尝试添加 ionic 卷轴，它会将事件类添加到中间元素。它应该一次显示三个元素，这可能吗？

<ion-scroll direction="x" class="wide-as-needed animate-show"  ng-show="" style="float:left;width:100%;" has-bouncing="false">
                <ul class="hNav clearfix" style="width:100%;"> <!--style="width:500px;"-->

                    <li><img ng-src="img/img0" width="80" height="80" /></li>
<li ><img ng-src="img/img1" width="80" height="80" /></li>
<li ><img ng-src="img/img2" width="80" height="80" /></li>


               <li ><img src="img/img4" width="80" height="80" /></li>
              <li ><img src="img/img5" width="80" height="80" /></li>
                </ul>

            </ion-scroll>

我想在中间的元素中添加 class="active"。请帮忙。

Answer 1

每次用户滚动时，您都可以获得左侧的位置，您可以随意处理。

HTML

<ion-content direction="x" class="wide-as-needed animate-show"  ng-show="showFilterStatus" style="float:left;width:100%;"
                         on-scroll="testSwipe()" scroll-event-interval="1000" has-bouncing="false"  delegate-handle="small" padding="false" start-x="getXStart()">
                <ul class="hNav clearfix" style="width:800px;"> <!--style="width:500px;"-->
                    <!--<li ><a href="#">&nbsp;</a></li>
                    <li ng-repeat="filter in filterList"><a ng-class="{sltItm: $index==showFilterSelected}" ng-click="changeFilter($index)">{{filter.filterType}}</a></li>-->
                    <li><img src="img/spacer.png" width="80" height="80" /></li>
                    <li ng-repeat="filter in fTest">
                        <img ng-src="{{filter.not_selected}}" width="80" height="80" ng-show="filSel != $index" ng-click="clickFilter($index)"/>
                        <img ng-src="{{filter.selected}}" width="80" height="80" ng-show="filSel == $index" ng-click="showFilter()"/>
                    </li>
                    <!--<li ><img src="img/spacer.png" width="80" height="80" /></li>-->
                </ul>

            </ion-content>

$scope.testSwipe = function(){

            scroll_position = delegate.getScrollPosition().left;
            console.log("SCOPE SCROLL POSITION "+scroll_position);
            if (preSetFilterView){
                delegate.scrollTo(100*lastSelection, 0 , true);
                preSetFilterView = false;
            }
            else if (scroll_position < 60 && $scope.showFilterStatus == true){
                $scope.filSel = 0;
            }else if (scroll_position >60 && scroll_position<140 && $scope.showFilterStatus == true){
                $scope.filSel = 1;
            }else if (scroll_position > 140 && scroll_position < 240 && $scope.showFilterStatus == true){
                $scope.filSel = 2;
            }else if (scroll_position > 240 && $scope.showFilterStatus == true){
                $scope.filSel = 3;
            }

            /*else if (scroll_position > 240 && scroll_position < 340){
                $scope.filSel = 3;
            }else{
                $scope.filSel = 4;
            }*/
            if ($scope.filSel < 4 && $scope.showFilterStatus == true && lastSelection != $scope.filSel){
                lastSelection = $scope.filSel;
                startAtX = (100*$scope.filSel);
                delegate.scrollTo(100*$scope.filSel, 0 , true);
                $scope.changeFilter($scope.filSel);
                //delegate.rememberScrollPosition('position-set');

            }else if ($scope.filSel == 4 && $scope.showFilterStatus == true && lastSelection != $scope.filSel){
                lastSelection = $scope.filSel;
                delegate.scrollTo(100*$scope.filSel, 0 , true);
                var time = $timeout(function() {
                    $scope.showFilterDetail();
                    return true;
                }, 1000);
                //
            }
            console.log("SCOPE TEST SWIPE SELE" + $scope.filSel);
          // alert("INSIDE TEST SWIPE " + JSON.stringify(delegate.getScrollPosition()));

        };