市场平台
作者 NativeScript.org
@nstudio/nativescript-carousel
由 NativeScript 团队开发 | v8.0.3
适用于 NativeScript 的轮播组件（iOS & Android）。
npm i --save @nstudio/nativescript-carousel

@nstudio/nativescript-carousel

为 NativeScript 设计的简单轮播组件。

平台 支持 版本 NativeView
iOS 是 iOS 8.1+ DKCarouselView
Android 是 API 15+ ViewPager 与 PageIndicatorView

安装

NativeScript 7+

npm install @nstudio/nativescript-carousel

NativeScript 小于 NS7

npm install [email protected]

限制

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

属性 - 公共属性

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

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

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

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

  • selectedPage 可选

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

  • showIndicator 可选

显示或隐藏页面指示器

  • indicatorColor 可选

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

  • indicatorColorUnselected

设置未选择指示器的颜色

  • indicatorOffset 可选

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

属性 - iOS 特定属性

  • finite 可选

如果为真，最后一张幻灯片将循环到第一张，反之亦然

  • 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
iOS Android

指示器动画（仅限 Android！）

NONE COLOR SCALE SLIDE
anim_none anim_color anim_scale anim_slide
WORM THIN_WORM 填充 下落 交换
anim_worm anim_thin_worm anim_fill anim_drop anim_swap

变更日志

8.0.0

  • 移动到@nstudio范围下
  • gradle插件使用实现

7.0.1

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

7.0.0

  • 插件更新以支持NativeScript v7.0版本。感谢@BradMartin、@NathanWalker和@rickwalking提供的所有PR，确保代码编译和运行。: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的setter，以启用动态更改carousel项目数组长度，而不会导致Android抛出关于适配器集更改错误的崩溃。

4.0.2

  • Carousel现在从GridLayout扩展而不是AbsoluteLayout（更好的定位）。（感谢@bradmartin）

4.0.0

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

3.1.1

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

3.1.0

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

3.0.2

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

3.0.1

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

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绑定时的问题，不会刷新Carousel视图。

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（Android）。

2.1.2

  • 修复了一个关键的bug，当恢复活动时会导致应用崩溃（Android）。感谢 @EddyVerbruggen。

2.1.1

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

2.1.0

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

1.1.0

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

1.0.0

  • 初始发布

作者

合作者

贡献

我将接受改进此应用的拉取请求并分配信用。

  • 分支并克隆存储库
  • 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