NativeScript Carousel

NativeScript 的简单轮播组件。

安装

NativeScript 7+

ns plugin add nativescript-carousel

NativeScript 小于 NS7

tns plugin add [email protected]

限制

• (iOS) PagerIndicator 动画在 iOS 上不可用，仅限 Android。
• (Android) 无法使用自动和无限滚动。
• (Android) 轮播组件需要包裹在 GridLayout 中才能使指示器重叠。

用法

查看此存储库中包含的演示，了解如何使用轮播组件与您的框架进行集成

纯 TypeScript 演示

Angular 演示

Vue 演示

属性 - 公共属性

• items 可选 (必须与 itemTemplate 一起使用)

将数据数组分配给生成幻灯片并应用绑定上下文。如果 items 已填充，则必须使用模板选项。

• itemTemplate 可选 (必须与 items 一起使用)

定义每个幻灯片视图的视图模板。

• selectedPage 可选

通过索引设置/获取活动页面

• showIndicator 可选

显示或隐藏页面指示器

• indicatorColor 可选

设置活动指示器颜色。默认为半透明的白色。使用十六进制或颜色名称。

• indicatorColorUnselected

设置未选择指示器的颜色

• indicatorOffset 可选

默认情况下，指示器位于底部中央。您可以使用点 (x,y) 移动指示器。例如 indicatorOffset="100,100"

属性 - iOS 特定属性

• finite 可选

如果为 true，则最后一张幻灯片将回绕到第一张，反之亦然。

• bounce 可选

如果设置为 'true'，则滚动将在第一页/最后一页（非无限）弹跳。默认为 'false'。

• autoPagingInterval 可选

定义等待显示下一张幻灯片之前的秒数间隔。默认为 0（关闭）。

• scrollEnabled 可选

启用/禁用 Carousel 上的用户滚动。

• ios

返回 DKCarouselView 对象。

属性 - Android 特定属性

• android

返回 ViewPager 对象。

• indicatorAnimation

设置页面指示器动画类型。选择：color、slide、scale、worm、thin_worm、fill、drop 或 none。默认为 none。

• indicatorAnimationDuration

设置页面指示器动画持续时间的毫秒数。默认为 500。

• indicatorAlignment

设置页面指示器的对齐方式。选择 top 或 bottom。默认为 bottom。

• indicatorRadius

设置页面指示器点的半径。

• indicatorPadding

设置页面指示器点的填充。

• pageIndicatorCount

设置指示器数量，这将更改底层的 Android 数据适配器。请参阅问题 #5 讨论

演示

iOS	Android

指示器动画（仅限 Android！）

NONE	COLOR	SCALE	SLIDE

WORM	THIN_WORM	填充	滴落	交换

变更日志

7.0.1

• 热修复发布：修复了 @NativeClass() 装饰器的相关问题。

7.0.0

• 插件已更新以支持 NativeScript v7.0 版本。感谢 @BradMartin、@NathanWalker 和 @rickwalking 提交的所有 Pull Request 并确保代码编译和运行。:clap

6.1.0

• 修复了 iOS 安全区域的问题。不再需要使用自定义的 css-padding-hack。
• DKCarouselView pod 已更新到版本 2.5.0（修复安全区域布局）。
• 已知问题：iOS 上方向变化导致的渲染问题（DKCarouselView）（需要帮助）。
• 演示已更新。

6.0.0

• NativeScript 6.0 和 AndroidX 迁移。
• IndicatorView gradle 升级到 1.0.3（androidx）。
• 对 Android 侧的插件进行了部分重构，以更好地与 Angular 和 Vue 一起工作。
• 演示再次更新。
• 每个演示的说明已更新。

4.2.5

• 修复了 Android 上的令人头痛的 PagerAdapter 没有调用 PagerAdapter#notifyDataSetChanged! 改变适配器的内容 错误。
• AndroidX 迁移的热修复。
• 在 refresh() 函数中进行的小型重构。按需调用更安全。
• 重新设计了所有演示应用。添加了更多高级示例。
• 4.x 将是最后一个 Nativescript 5.x 版本。所有未来版本都将仅限于 Nativescript 6.x，包括 AndroidX。

4.2.1

• 静态项的热修复。抱歉！

4.2.0

• NS6 的 AndroidX 更新。感谢 @bradmartin！
• 代码清理，类型定义修复。
• 演示已更新。添加了适当的 Vue 示例。

4.1.0

• 为 Android 添加了 pageIndicatorCount 的设置器，以启用动态更改轮播项目数组长度，而不会导致 Android 抛出关于适配器设置更改错误的崩溃。

4.0.2

• 轮播现在从 GridLayout 继承，而不是 AbsoluteLayout（更好的定位）。（感谢 @bradmartin）

4.0.0

• 迁移到 TypeScript，添加了类型定义（感谢 @bradmartin）。
• 演示应用进行了清理，添加了 ng-demo（感谢 @bradmartin）。

3.1.1

• 兼容最近的 TNS 3.2.x 版本。
• 合并了有关 notifyDataSetChanged 问题的修复。感谢 @OPADA-Eng。
• 修复了 iOS 上只有 2 张幻灯片时的问题。感谢 @sitefinitysteve。

3.1.0

• 兼容最近的 TNS 3.1.x 版本。
• 更新 Android 指示库到最新版本。

3.0.2

• 修复了 Android 上事件不工作的问题（影响所有事件）。

3.0.1

• 修复了 Android 上在 refresh 期间导航回包含轮播的视图时的关键错误。

3.0.0

• 终于！支持 TNS 3.x。感谢 @MattNer0、@sitefinitysteve、@hristo、@NickIliev。
• 修复了 Android 上的“刷新观察器”问题，感谢 @MattNer0。
• 添加了启用/禁用滚动的新属性，感谢 @sitefinitysteve。
• 为 Android 添加了新属性：indicatorOffset，感谢 @sitefinitysteve。
• 修复了 iOS 上方向变化的问题。请使用 nativescript-orientation 插件来触发 UI 刷新。
• 代码重构和清理，引入了 common.js。
• 更新 Pod 和 Android-IndicatorView 到最新版本。

2.4.2

• 向插件和 Pod 添加了 bounce 属性。感谢 @sitefinitysteve。

2.4.1

• 修复了 iOS 上更新 Items 绑定时不会刷新轮播视图的问题。

2.4.0

• 添加了新事件，'pageScrolling'。感谢 @sitefinitysteve！
• 更新 'PageIndicatorView' 的 gradle 到版本 0.1.2。
• 更新 package.json 中的 'plugin' 元数据，以符合即将推出的 3.0 插件标准。
• 对 Android 上的 ViewPager.populate 异常的潜在修复。

2.3.1

• 对 ng2 和 webpack 用户（尝试将无效的 'this' 链接到 Java 对象）的潜在修复。感谢 @peterstaev。
• 更新 android 指示器 gradle 插件。新动画：swap！

2.3.0

• 将 iOS Pod 更改为指向我们自己的存储库！我们现在有了控制权 ;)
• 为 iOS 添加了新属性：indicatorColorUnselected。允许您设置未选择点的颜色。

2.2.0

• 修复了可能导致崩溃或删除幻灯片的 refresh 函数问题（Android）。
• 将 Android-indicators gradle 库更新到 v0.1.0。更稳定，更多动画！新动画有：drop、scale 和 thin_worm。
• 修复了禁用指示器时显示的小白条问题（Android）。感谢 @EddyVerbruggen。
• 修复了另一个潜在的bug，该bug可能导致在恢复活动时应用崩溃（Android）。

2.1.2

• 修复了一个关键bug，该bug会导致在恢复活动时应用崩溃。感谢@EddyVerbruggen。

2.1.1

• 修正了README，iOS确实允许在CarouselItems内部进行触摸事件。感谢@terreb！
• 修复了iOS上的selectedPage属性，现在也返回选中索引。
• 更新iOS Podfile到1.4.12

2.1.0

• 添加了对Android的支持！
• Android获得了由@romandanylyk制作的动画分页指示器。

1.1.0

• 更新Pod到版本'1.4.10'
• 当finite设置为'true'时修复了页面更改事件。
• 添加了新的属性'selectedPage'（通过索引设置活动页面）。
• 更新了示例应用

1.0.0

• 初始版本

作者

• manijak

合作者

• bradmartin
• NathanWalker
• rickwalking
• sitefinitysteve
• EddyVerbruggen
• Pip3r4o
• MattNer0

贡献

我会接受改进此项目的拉取请求，并给予信用。

• 复制并克隆仓库
• cd src && npm run setup
• npm run demo.android 用于Android开发
• npm run demo.ios 用于iOS开发
• npm run demo-ng.ios 用于iOS Angular应用
• npm run demo-ng.android 用于Android Angular
• npm run demo-vue.ios 用于iOS Vue应用
• npm run demo-vue.android 用于Android Vue