离子载玻片如何在离子 1.2.4 上工作(或者它适用于 1.2.4?

How does ion-slides work on ionic 1.2.4 (Or does it work for 1.2.4?)

本文关键字：或者 适用于 工作      更新时间：2023-09-26

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

有没有人有 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

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

因此，请将您的代码更改为

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

它应该有效。

以下是要尝试的其他效果列表:) slide或cube或coverflow

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

为了获得更好的文档，v2 中的ion-slides类似于 v1：

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

离子载玻片文档给人的感觉是它在 Ionic v1 中有些不完整。要获得新离子玻片组件的完整功能，您需要从此处查看文档

如果你仔细观察离子幻灯片标签，你会看到类似这个滑块="data.slider"的东西。

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


示例方法用法

$scope.滑块 = 数据.滑块;
$scope.slider.slideNext（）;

相关文章：