无法使用其索引号在离子幻灯片中显示指定的幻灯片

时间:2016-12-31 06:14:23

标签: javascript angularjs ionic-framework slide hybrid-mobile-app

以下是使用离子幻灯片实现幻灯片的代码

HTML文件

<ion-slides options="options" slider="data.slider" >

  <!-- status view -->
  <ion-slide-page ng-repeat="t in business">
  <ion-content  class="padding">
    <!-- div ng-repeat="item in t.offers">
      <ion-list>
        <ion-item>
        {{item.product_name}}
        </ion-item>
      </ion-list>
    </div> -->
    <div class="list card" ng-repeat="item in t.offers" ng-click="productDesc(item.product_id)">

    <div class="item item-avatar">
      <img src="img/icon.png">
      <h2>{{item.product_name}}</h2>
      <p>{{item.company_name}}</p>
    </div>

    <div class="item item-image">
      <img src="{{ip}}/{{item.product_image}}">
    </div>

    <a class="item item-right assertive">
      {{item.offer_discount}}% item 
      <span style="margin-left: 150px;">AED. {{(item.offer_price-((item.offer_price*item.offer_discount)/100))|number:0}}</span><s style="margin-left: 10px;font-size: 14px;color: #565656;">{{item.offer_price}}</s>
    </a>

  </div>
  <ion-infinite-scroll on-infinite="addMoreItem(t.id)" ng-if="t.offers.length!=0"></ion-infinite-scroll>
  </ion-content>
  </ion-slide-page>

</ion-slides>

控制器文件

 $scope.options = {
  loop: false,
  effect: 'slide',
  speed: 500
}

$scope.$on("$ionicSlides.sliderInitialized", function(event, data){
  // data.slider is the instance of Swiper
  $scope.slider = data.slider;
  //console.log($ionicSlideBoxDelegate);
  //$ionicSlideBoxDelegate.update();

  //$ionicSlideBoxDelegate.slide(1,50);
});

$scope.$on("$ionicSlides.slideChangeStart", function(event, data){
  console.log('Slide change is beginning');


});

$scope.$on("$ionicSlides.slideChangeEnd", function(event, data){
  // note: the indexes are 0-based
  $scope.activeIndex = data.slider.activeIndex;
  $scope.previousIndex = data.slider.previousIndex;
});

我尝试过的事情是

  1. 使用$ ionicSlideBoxDelegate.slide()函数
  2. 里面调用了data.slider.slideTo()函数 $ scope。$ on(“$ ionicSlides.sliderInitialized”,函数(事件,数据)

1 个答案:

答案 0 :(得分:0)

您想设置初始幻灯片吗? 我遇到了同样的问题,我通过将initialSlide属性放在options对象中来解决它:

    $scope.options = {
      initialSlide: $scope.signId,
      loop: false,
      effect: 'slide',
      speed: 500,
    };