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

来源：互联网发布：鹊桥淘宝客区别编辑：程序博客网时间：2024/06/05 00:37

实现效果

这里写图片描述

我是代码

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，不知道有人解决了没，所以我的解决办法是，如果是两个，就插入了一张广告图片。

0 0