以下是使用离子幻灯片实现幻灯片的代码
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;
});
我尝试过的事情是
答案 0 :(得分:0)
您想设置初始幻灯片吗? 我遇到了同样的问题,我通过将initialSlide属性放在options对象中来解决它:
$scope.options = {
initialSlide: $scope.signId,
loop: false,
effect: 'slide',
speed: 500,
};