商场
作者 NativeScript.org
nativeScript-carousel-without-page-indicators
by romandragan | v67.1.1
为 NativeScript (iOS & Android) 提供的轮播组件。
npm i --save nativescript-carousel-without-page-indicators

npm npm

NativeScript Carousel

为 NativeScript 提供的一个简单的轮播组件。

平台 支持 版本 原生视图
iOS 是 iOS 8.1+ DKCarouselView
Android 是 API 15+ ViewPager 与 PageIndicatorView

安装

在项目的根目录中运行 tns plugin add nativescript-carousel。添加具有本地依赖项的插件后，您必须清理项目。这可以通过执行 tns platform remove android（或 ios）然后 tns platform add android（或 ios）来完成。NS CLI 的新版本提供了一个 clean 命令，如果您喜欢此选项，则可以在一个脚本中完成此操作。

限制

  • （iOS）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。

  • 指示器半径

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

  • 指示器填充

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

  • 页面指示器数量

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

演示

iOS Android
iOS Android

指示器动画（仅限Android！）

NONE 颜色 比例 滑动
anim_none anim_color anim_scale anim_slide
蠕虫 细蠕虫 填充 滴落 交换
anim_worm anim_thin_worm anim_fill anim_drop anim_swap

变更日志

6.1.0

  • 修复iOS安全区域问题。不再需要使用自定义css填充-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，以启用动态更改轮播项目数组长度，而不会导致Android抛出关于适配器设置更改错误的崩溃。

4.0.2

  • 轮播现在从GridLayout扩展到AbsoluteLayout（更好的定位）。（感谢@bradmartin）

4.0.0

  • 迁移到TypeScript，添加了类型定义（感谢@bradmartin）
  • 在演示应用中进行清理，添加了ng演示（感谢@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。
  • 修复了在恢复活动时可能导致应用程序崩溃的另一个潜在错误（Android）。

2.1.2

  • 修复了在恢复活动时可能导致应用程序崩溃的关键错误（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

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

1.0.0

  • 初始发布

作者

合作者

贡献

我将接受改进此项目的pull请求，并给予相应的认可。

  • Fork并克隆仓库
  • 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