在Ionic中使用$ionicSlideBoxDelegate来创建两个或多个滑动框
Using $ionicSlideBoxDelegate for two or more Slide Box in Ionic
对于这个HTML和AngularJS初学者的问题很抱歉。我在一页里放了两个幻灯片盒。我希望当用户单击上一个/下一个箭头按钮时，它显示上一个/下一张幻灯片。但问题是，当单击上一个/下一个箭头时，两个框中的所有幻灯片都转到上一个/下一张幻灯片。如何使在点击第一张幻灯片框中的下一个按钮时，只有第一张幻灯片框中的幻灯片会转到下一张幻灯片?我能做到这一点只使用$ionicSlideBoxDelegate还是我需要另一种方式?谢谢…
下面是我的HTML代码:
<ion-slide-box show-pager="false" auto-play="true" does-continue="true" style="background-image:url('img/border.jpg'); background-repeat: no-repeat;">
<ion-slide>
<h3 style="padding-left:10px; padding-top:5px;">Pizza Favourite</h3>
<div class="row">
<div class="ion-ios-arrow-back col col-5" style="padding-top:50px;" ng-click="previousSlide()"/></div>
<span class="row">
<img src="img/pizza1.jpg" class="col col-50" style="width:100px; height:100px; margin-top:-10px">
<div class="col col-50">
<h4 class="row" style="margin-top:-10px">Pizza 1 </h4>
<div class="row" style="margin-top:-20px">
<img src="img/smile.jpg" style="width:50px; height:50px;"class="col col-40">
<h4 class="col col-60"> 5.0</h4>
</div>
</div>
</span>
<div class="ion-ios-arrow-forward col-5" style="padding-top:50px;" ng-click="nextSlide()"/></div>
</div>
</ion-slide>
<ion-slide>
<h3 style="padding-left:10px; padding-top:5px;">Pizza Favourite</h3>
<div class="row">
<div class="ion-ios-arrow-back col col-5" style="padding-top:50px;" ng-click="previousSlide()"/></div>
<span class="row">
<img src="img/pizza2.jpg" class="col col-50" style="width:100px; height:100px; margin-top:-10px">
<div class="col col-50">
<h4 class="row" style="margin-top:-10px">Pizza 2 </h4>
<div class="row" style="margin-top:-20px">
<img src="img/smile.jpg" style="width:50px; height:50px;"class="col col-40">
<h4 class="col col-60"> 5.0</h4>
</div>
</div>
</span>
<div class="ion-ios-arrow-forward col-5" style="padding-top:50px;" ng-click="nextSlide()"/></div>
</div>
</ion-slide>
<ion-slide>
<h3 style="padding-left:10px; padding-top:5px;">Pizza Favourite</h3>
<div class="row">
<div class="ion-ios-arrow-back col col-5" style="padding-top:50px;" ng-click="previousSlide()"/></div>
<span class="row">
<img src="img/pizza3.jpg" class="col col-50" style="width:100px; height:100px; margin-top:-10px">
<div class="col col-50">
<h4 class="row" style="margin-top:-10px">Pizza 3</h4>
<div class="row" style="margin-top:-20px">
<img src="img/smile.jpg" style="width:50px; height:50px;"class="col col-40">
<h4 class="col col-60"> 5.0</h4>
</div>
</div>
</span>
<div class="ion-ios-arrow-forward col-5" style="padding-top:50px;" ng-click="nextSlide()"/></div>
</div>
</ion-slide>
</ion-slide-box>
<ion-slide-box show-pager="false" auto-play="true" does-continue="true" style="background-image:url('img/border.jpg'); background-repeat: no-repeat;">
<ion-slide>
<h3 style="padding-left:10px; padding-top:5px;">Burger Favourite</h3>
<div class="row">
<div class="ion-ios-arrow-back col col-5" style="padding-top:50px;" ng-click="previousSlide()"/></div>
<span class="row">
<img src="img/burger1.jpg" class="col col-50" style="width:100px; height:100px; margin-top:-10px">
<div class="col col-50">
<h4 class="row" style="margin-top:-10px">Burger 1 </h4>
<div class="row" style="margin-top:-20px">
<img src="img/smile.jpg" style="width:50px; height:50px;"class="col col-40">
<h4 class="col col-60"> 5.0</h4>
</div>
</div>
</span>
<div class="ion-ios-arrow-forward col-5" style="padding-top:50px;" ng-click="nextSlide()"/></div>
</div>
</ion-slide>
<ion-slide>
<h3 style="padding-left:10px; padding-top:5px;">Burger Favourite</h3>
<div class="row">
<div class="ion-ios-arrow-back col col-5" style="padding-top:50px;" ng-click="previousSlide()"/></div>
<span class="row">
<img src="img/burger2.jpg" class="col col-50" style="width:100px; height:100px; margin-top:-10px">
<div class="col col-50">
<h4 class="row" style="margin-top:-10px">Burger 2 </h4>
<div class="row" style="margin-top:-20px">
<img src="img/smile.jpg" style="width:50px; height:50px;"class="col col-40">
<h4 class="col col-60"> 5.0</h4>
</div>
</div>
</span>
<div class="ion-ios-arrow-forward col-5" style="padding-top:50px;" ng-click="nextSlide()"/></div>
</div>
</ion-slide>
<ion-slide>
<h3 style="padding-left:10px; padding-top:5px;">Burger Favourite</h3>
<div class="row">
<div class="ion-ios-arrow-back col col-5" style="padding-top:50px;" ng-click="previousSlide()"/></div>
<span class="row">
<img src="img/burger3.jpg" class="col col-50" style="width:100px; height:100px; margin-top:-10px">
<div class="col col-50">
<h4 class="row" style="margin-top:-10px">Burger 3</h4>
<div class="row" style="margin-top:-20px">
<img src="img/smile.jpg" style="width:50px; height:50px;"class="col col-40">
<h4 class="col col-60"> 5.0</h4>
</div>
</div>
</span>
<div class="ion-ios-arrow-forward col-5" style="padding-top:50px;" ng-click="nextSlide()"/></div>
</div>
</ion-slide>
</ion-slide-box>
.controller('HomeCtrl', function($scope, $ionicSlideBoxDelegate) {
$scope.nextSlide = function() {
$ionicSlideBoxDelegate.next();
};
$scope.previousSlide = function() {
$ionicSlideBoxDelegate.previous();
}
})
您需要为每个幻灯片框指定"句柄":
<ion-slide-box delegate-handle="burgers">...</ion-slide-box>
然后可以使用句柄控制特定的幻灯片框:
$ionicSlideBoxDelegate.$getByHandle('burgers').next();
$getByHandle的文档
相关文章：
- JQuery合并了keyup和focusout两个函数
- 如何使用 node.js 比较两个 json 数组
- 为复选框javascript指定两个值
- 用每小时的差值填充数组/列表-从下拉列表中给定两个时间值
- 单击时切换两个图像
- 我可以'我似乎不知道如何修复javascript中的两个lint.有人能帮我理解吗
- 基于两个条件退出While循环
- 如何在这里将两个值最低的数字相加
- 组合两个javascript函数
- 如何使用offer/answer交换来自两个对等连接的流
- jsf中两个字符串的颜色代码差异
- 加载两个具有相同父密钥名称的json文件
- 在Qualtrics中，介绍如何动态连接两个滑块
- 访问$.ajax(）函数中的两个不同数组
- 如何在three.js上添加两个向量
- 使用angularJS在Ionic应用程序的两个页面之间传递值
- 在两个视图中使用Angular JS为Ionic App创建动态列表
- 在Ionic中使用$ionicSlideBoxDelegate来创建两个或多个滑动框
- 在angular [Ionic]中传递两个HTML元素之间的值
- 如何在 Ionic 中的两个页面之间导航
