Question

我使用了文档http://ionicframework.com/docs/nightly/api/directive/ionSlides/并且基本上使用了入门应用模板。我将html添加到模板中，并将js部分添加到我的控制器中，但它给出了错误ReferenceError：fade未定义且没有显示任何内容..

有没有人有1.2.4离子的工作离子幻灯片示例？我的假设是他们改变了一些东西，但还没有为它制作文档。

这是我使用的代码，我将js部分添加到控制器，将html添加到我的视图中。

$scope.options = {
  loop: false,
  effect: fade,
  speed: 500,
}
$scope.data = {};
$scope.$watch('data.slider', function(nv, ov) {
  $scope.slider = $scope.data.slider;
})

<ion-slides  options="options" slider="data.slider">
  <ion-slide-page>
    <div class="box blue"><h1>BLUE</h1></div>
  </ion-slide-page>
  <ion-slide-page>
    <div class="box yellow"><h1>YELLOW</h1></div>
  </ion-slide-page>
  <ion-slide-page>
    <div class="box pink"><h1>PINK</h1></div>
  </ion-slide-page>
</ion-slides>

进入视图后，我收到了这个错误：

ReferenceError: fade is not defined
at new (controllers.js:22)
at invoke (ionic.bundle.js:17762)
at Object.instantiate (ionic.bundle.js:17770)
at ionic.bundle.js:22326
at self.appendViewElement (ionic.bundle.js:56883)
at Object.switcher.render (ionic.bundle.js:54995)
at Object.switcher.init (ionic.bundle.js:54915)
at self.render (ionic.bundle.js:56743)
at self.register (ionic.bundle.js:56701)
at updateView (ionic.bundle.js:62357)

我使用的是夜间版本的示例，我的离子版本是1.2.4

Answer 1

对我来说有用的是将effect选项设置为字符串，因为我们正在做的事情（从他们的文档中编写和复制）传递了一个名为fade的变量，当然我们没有＆＃ 39; t定义它解释错误。

所以将代码更改为

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

它应该有用。

下面还列出了其他效果列表：slide或cube或coverflow

Answer 2

查看夜间文件： http://ionicframework.com/docs/nightly/api/directive/ionSlides/

Answer 3

对于更好的文档，v2中的ion-slides与v1类似：

https://ionicframework.com/docs/v2/api/components/slides/Slides/

Answer 4

ion-slides文档给出了一种感觉，它在离子v1中有些不完整。要获得新离子载玻片组件的全部功能，您需要查看here

中的文档

如果仔细观察ion-slides标签，您会看到类似 slider =＆＃34; data.slider＆＃34; 的内容。

data.slider 是滑块的名称。您可以使用上面链接中提到的方法来执行强大的操作。比如更改幻灯片索引或添加按钮以显示下一张幻灯片。

示例方法用法

$ scope.slider = data.slider;
$ scope.slider.slideNext（）;

离子载玻片如何在离子1.2.4上起作用（或者它对1.2.4有效吗？）

4 个答案: