适用于 iOS 和 Android 的 NativeScript Slides

曾称为 nativescript-intro-slides 的插件

简介幻灯片示例

图片轮播示例

由 Brad Martin 提供的视频

示例用法

XML


	<Slides:SlideContainer id="slides" pageIndicators="true" indicatorsColor="#fff">
			<Slides:Slide class="slide-1">
				<Label text="This is Panel 1"  />
			</Slides:Slide>
			<Slides:Slide class="slide-2">
				<Label text="This is Panel 2"  />
			</Slides:Slide>
			<Slides:Slide class="slide-3">
				<Label text="This is Panel 3"  />
			</Slides:Slide>
			<Slides:Slide class="slide-4">
				<Label text="This is Panel 4"  />
			</Slides:Slide>
			<Slides:Slide class="slide-5">
				<Label text="This is Panel 5"  />
			</Slides:Slide>
	</Slides:SlideContainer>

CSS

.slide-1{
  background-color: darkslateblue;
}

.slide-2{
  background-color: darkcyan;
}
.slide-3{
  background-color: darkgreen;
}

.slide-4{
  background-color: darkgoldenrod;
}
.slide-5{
  background-color: darkslategray;
}
Label{
  text-align: center;
  width: 100%;
  font-size: 35;
  margin-top: 35;
}

非常适合用于图像轮播的简介/教程。

要使用简介幻灯片插件，您需要首先使用 xmlns:Slides="nativescript-slides" 将其导入到您的 xml 布局中。

当使用简介幻灯片插件时，您需要在 <Slides:SlideContainer> 内至少包含两个 <Slides:Slide> 视图。

添加任意数量的 <Slides:Slide>。

SlideContainer 方法

nextSlide() - 导航到下一张幻灯片（向右方向）
previousSlide() - 导航到上一张幻灯片（向左方向）

SlideContainer 属性

loop : boolean - 如果为 true，则幻灯片将无限循环。建议用例为图像轮播或类似功能。
velocityScrolling : boolean - 如果为 true，则基于手指移动速度计算过渡速度。
pageIndicators : boolean - 如果为 true，将在幻灯片底部添加指示点。
indicatorsColor : string - 指示点颜色。
interval : integer - 值以毫秒为单位。建议用例为图像轮播或类似功能，可以每隔固定时间更改图像。在未加载函数调用 page.getViewById("your_id").stopSlideshow() 以取消注册（your_id 是分配给 <Slides:SlideContainer> 的 id），可以使用 startSlidShow 重新启动。
disablePan : boolean - 如果为 true，则禁用平移。这样您就可以调用 nextSlide()/previousSlide() 函数来更改幻灯片。如果幻灯片用于获取用户信息，如电子邮件、电话号码、用户名等，在这种情况下，您不希望用户在不填写详细信息的情况下从一个幻灯片移动到另一个幻灯片。
pagerOffset : string - 页签的顶部边距。数字或百分比，默认 88%。

事件

start - 开始平移
changed - 过渡完成
cancelled - 用户未完成过渡，或在没有幻灯片的情况下开始\结束
finished - 最后一张幻灯片进入视野

Angular 2 兼容性

要使用 Angular2 和来自 nativescript-angular 的 registerElement 使用幻灯片，您需要将 SlideContainer 的 angular 属性设置为 true。然后在您的 Angular 组件的 ngAfterViewInit 中，您将需要一个幻灯片容器的实例来调用 constructView() 函数。请参考示例

Android 可选属性

androidTranslucentStatusBar : boolean - 如果为 true，则在支持该功能的设备上，Android 状态栏将透明（Android sdk >= 19）。
androidTranslucentNavBar : boolean - 如果为 true，则在支持该功能的设备上，Android 导航栏将透明（Android sdk >= 19）。

插件开发工作流程

将仓库克隆到您的计算机上。
运行 npm run setup 准备演示项目
使用 npm run build 构建
使用 npm run demo.android 或 npm run demo.ios 运行并部署到您的设备或模拟器

已知问题

循环似乎存在一个bug，导致过渡效果从右到左出现。

如何：动态加载幻灯片

您希望连接到视图的加载事件，然后创建您的视图元素。

演示代码

<Slides:SlideContainer loaded="onSlideContainerLoaded"

import * as slides from 'nativescript-slides/nativescript-slides'

export function onSlideContainerLoaded(args) {    
    let slideContainer = <slides.SlideContainer>args.object;

      //Construct the slides
      slideContainer.addChild(getSlide("Page 1", "slide-1"));
      slideContainer.addChild(getSlide("Page 2", "slide-2"));
      slideContainer.addChild(getSlide("Page 3", "slide-3"));
      slideContainer.addChild(getSlide("Page 4", "slide-4"));
      slideContainer.addChild(getSlide("Page 5", "slide-5"));

  }

  function getSlide(labelText: string, className: string)  {
      let slide = new slides.Slide();
      slide.className = className;
      let label = new labelModule.Label();
      label.text = labelText;
      slide.addChild(label)

      return slide;
  }

Android上的更平滑的平移（仅适用于 {N} v2.0.0 及以下版本仅限）。

要在Android上实现更平滑的拖动，只需进入此处 tns-core-modules 的 gestures.android.js 文件

/node_modules/tns-core-modules/ui/gestures/gestures.android.js

并将

    CustomPanGestureDetector.prototype.getMotionEventCenter = function (event) {
        var count = event.getPointerCount();
        var res = { x: 0, y: 0 };
        for (var i = 0; i < count; i++) {
            res.x += event.getX(i);
            res.y += event.getY(i);
        }
        res.x /= (count * this.density);
        res.y /= (count * this.density);
        return res;
    };

更改为

  CustomPanGestureDetector.prototype.getMotionEventCenter = function (event) {
        var count = event.getPointerCount();
        var res = { x: 0, y: 0 };
        for (var i = 0; i < count; i++) {
            res.x += event.getRawX();
            res.y += event.getRawY();
        }
        res.x /= (count * this.density);
        res.y /= (count * this.density);
        return res;
    };