适用于 iOS 和 Android 的 NativeScript Slides

此插件之前称为 nativescript-intro-slides

简介幻灯片示例

图片轮播示例

由 Brad Martin 提供的视频

示例用法

XML


	<Slides:SlideContainer id="slides" pageIndicators="true">
			<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() - 导航到上一张幻灯片（左侧方向）
goToSlide(index) : - 跳转到指定索引的幻灯片

SlideContainer 的属性

loop : boolean - 如果为 true，则使幻灯片成为无限循环。建议的使用场景是图像轮播或类似的应用。
disablePan : boolean - 如果为 true，则禁用平移。这样您就可以调用 nextSlide()/previousSlide() 函数来更改幻灯片。如果幻灯片用于获取有关用户的信息，如电子邮件、电话号码、用户名等，在这种情况下，您不希望用户在没有填写详细信息的情况下从一个幻灯片移动到另一个幻灯片。
pagerOffset : string - 页码的顶部边距。数字或百分比，默认 88%。
pageIndicators : boolean - 如果为 true，则将在幻灯片底部添加指示点。
**slideWidth: number - 设置幻灯片的宽度。目前仅在 android 上有效）。

指示器

如果 pageIndicators 属性为 true，则从 2.0.0 版本开始，您将立即看不到页面指示器。有两组 CSS 类可供您自定义，用于活动指示器和非活动指示器。以下是一个半透明点的示例。

.slide-indicator-inactive {
  background-color: #fff;
  opacity: 0.4;
  width: 10;
  height: 10;
  margin-left: 2.5;
  margin-right: 2.5;
  margin-top: 0;
  border-radius: 5;
}

.slide-indicator-active {
  background-color: #fff;
  opacity: 0.9;
  width: 10;
  height: 10;
  margin-left: 2.5;
  margin-right: 2.5;
  margin-top: 0;
  border-radius: 5;
}

事件

start - 开始平移
changed - 转换完成
cancelled - 用户没有完成转换，或在开始/结束时没有幻灯片
finished - 最后一张幻灯片已进入视图

Angular 2 兼容性

我开始开发 Angular 2 版本，它们可以在以下位置进行检查：Angular 2 版本的幻灯片

如果您想使用此插件与 Angular 2 一起使用，您将需要设置来自 nativescript-angular 的 registerElement 的 SlideContainer 属性为 true。然后在您的 Angular 组件的 ngAfterViewInit 中，您将需要您的幻灯片容器实例来调用 constructView() 函数。请参阅以下示例（跟随示例）

插件开发工作流程

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

已知问题

循环似乎存在一个bug，导致从右到左的过渡不正常。
目前，在Android中，当滑动组件位于滚动视图中时，存在已知问题。

如何：动态加载幻灯片

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

演示代码

<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;
}

感谢这些出色的贡献者！

Brad Martin

Obsessive Inc/Abhijith Reddy

还要感谢 Nathan Walker 为设置 {N} 插件种子而做出的贡献，该种子被用来帮助启动此插件。更多信息请查看这里：https://github.com/NathanWalker/nativescript-plugin-seed

贡献指南

许可证

MIT

适用于 {N} 版本 2.0.0+