ionic之ion-slide-box实现图片轮播

太过爱你忘了你带给我的痛 2022-07-19 02:39 129阅读 0赞

### 实现效果 ###

![这里写图片描述][20160809162429652]

### 我是代码 ###

html代码

<ion-slide-box on-slide-changed="slideHasChanged($index)" auto-play="true" does-continue="true"
                           slide-interval=2000 show-pager="true" pager-click="pageClick(index)"
                           active-slide="model.activeIndex" delegate-handle="delegateHandler" ng-click="coverFlowClick()">
              <ion-slide>
                <div class="box">
                  <img src="http://img9.tu11.com:8080/picture/121022/pic5/14.jpg">
                </div>
              </ion-slide>
              <ion-slide>
                <div class="box">
                  <img src="http://down77.yousiji.com/uploads1/allimg/c101123/12Z4Qc10S10-193502.jpg">
                </div>
              </ion-slide>
              <ion-slide>
                <div class="box">
                  <img src="http://img.mm522.net/flashAll/20120206/13285185634aUfhU.jpg">
                </div>
              </ion-slide>
            </ion-slide-box>

controller代码

.controller('articlePageCtrl', ['$scope', '$stateParams', '$ionicSlideBoxDelegate', 'FinancList', '$timeout', // TIP: Access Route Parameters for your page via $stateParams.parameterName
        function ($scope, $stateParams, $ionicSlideBoxDelegate, FinancList, $timeout) { 
    
          $scope.articles = [{id: 0, avatar: 1, img: 2, title: 3, des: 4, see: 5},
            {id: 1, avatar: 1, img: 2, title: 3, des: 4, see: 5}];
          //为了验证属性active-slide定义的模型，angularjs是mvc模式
          $scope.model = {
            activeIndex: 0
          };
          //滑动图片的点击事件
          $scope.coverFlowClick = function () { 
            var index = $ionicSlideBoxDelegate.currentIndex();
            console.log("coverFlowClick index = ", index);
          }
          //此事件对应的是pager-click属性，当显示图片是有对应数量的小圆点，这是小圆点的点击事件
          $scope.pageClick = function (index) { 
            //alert(index);
            console.log("pageClick index = ", index);
            $scope.model.activeIndex = index;
          };
    
          //当图片切换后，触发此事件，注意参数
          $scope.slideHasChanged = function ($index) { 
            //alert($index);
            //console.log("slideHasChanged index = ", $index);
          };
          //这是属性delegate-handle的验证使用的，其实没必要重定义，直接使用$ionicSlideBoxDelegate就可以
          $scope.delegateHandle = $ionicSlideBoxDelegate;
     }])

### 注意 ###

ion-slide-box这个控件，如果你只有两个元素的话，它会生成四个重复的元素，目测是ionic的一个bug，不知道有人解决了没，所以我的解决办法是，如果是两个，就插入了一张广告图片。

[20160809162429652]: /images/20220718/8bff94a04a804083a678e7ab11b80fd0.png