适用于 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 - 仪表盘的 Margin-top。数字或百分比，默认 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 版本的 slides

如果您想使用此插件与 Angular 2 一起使用，您将想要设置 SlideContainer 的属性 angular 为 true。然后在您的 Angular 组件中的 ngAfterViewInit。您将想要有一个您的幻灯片容器实例来调用函数 constructView()。请遵循示例

插件开发工作流程

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

已知问题

循环似乎存在一个错误，导致从右到左的过渡不良。
目前在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+