NativeScript + Angular 为 iOS 和 Android 提供的幻灯片

简介幻灯片示例

图片轮播示例

视频来自 NativeScript Slides 插件。并非所有功能都已实现。

由 Brad Martin 提供

示例用法

import { SlidesModule } from "nativescript-ngx-slides";

import { AppComponent } from "./app.component";

@NgModule({
  declarations: [AppComponent],
  bootstrap: [AppComponent],
  imports: [NativeScriptModule, SlidesModule],
  schemas: [NO_ERRORS_SCHEMA]
})
export class AppModule {}

XML

<slides>
    <slide class="slide-1">
        <Label text="This is Panel 1"></Label>
    </slide>
    <slide class="slide-2">
        <Label text="This is Panel 2"></Label>
    </slide>
    <slide class="slide-3">
        <Label text="This is Panel 3"></Label>
    </slide>
    <slide class="slide-4">
        <Label text="This is Panel 4"></Label>
    </slide>
    <slide class="slide-5">
        <Label text="This is Panel 5"></Label>
    </slide>
</slides>

CSS

将此代码放在项目的根目录中的 app.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;
  color: #fff;
}

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

这是一个持续进行中的项目。请随时贡献。

SlideContainer 属性

• loop : boolean - 如果为 true，则幻灯片将形成无限循环。建议用例为图片轮播或类似功能。

• pageIndicators : boolean - 如果为 true，将在幻灯片底部添加指示点。

• swipeSpeed : number - 确定滑动速度。swipeSpeed 属性值越大，滑动越快。默认值为 3。尝试将其更改为 15 以查看结果。

指示器

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

插件开发工作流程

• 将仓库克隆到您的计算机上。
• 运行 npm install 准备项目
• 使用 npm run android 或 npm run ios 运行和部署到您的设备或模拟器
• 使用 npm run build 构建ngPackagr版本

已知问题

• 在 ScrollView 或 TabViews 内运行效果不佳。

贡献者

Josh Sommer	dobjek	Eddy Verbruggen	Codeback Software

贡献指南

贡献指南

许可协议

MIT

适用于 {N} 版本 2.0.0+