市场place
作者 NativeScript.org
nativescript-na-slider
由 Filip Nordling 编写 | v1.1.3
NativeScript 滑块插件
npm i --save nativescript-na-slider

NativeScript NA 滑块插件

注意！目前不支持 Android。

NativeScript 滑块。是我之前已弃用的幻灯片插件 nativescript-na-slideshow 的继任者。

安装

$ tns plugin add nativescript-na-slider

用法

以下是在 XML 中静态添加幻灯片的方法

<Page xmlns:NASlider="nativescript-na-slider">
  
  <NASlider:NASlider id="slider">
    <NASlider:NASliderContainer>
      <NASlider:NASliderSlide>
        <Label text="Slide 1" />
      </NASlider:NASliderSlide>
      <NASlider:NASliderSlide>
        <Label text="Slide 2" />
      </NASlider:NASliderSlide>
      <NASlider:NASliderSlide>
        <Label text="Slide 3" />
      </NASlider:NASliderSlide>
    </NASlider:NASliderContainer>
  </NASlider:NASlider>
  
</Page>

使用 <Repeater>

对于更动态的滑块，可以使用 <Repeater>

<Page xmlns:NASlider="nativescript-na-slider">
  
  <NASlider:NASlider items="{{ slides }}">
    <Repeater>
      <Repeater.itemsLayout>
        <NASlider:NASliderContainer />
      </Repeater.itemsLayout>
      <Repeater.itemTemplate>
        <NASlider:NASliderSlide>
          <Label text="{{ text }}" />
        </NASlider:NASliderSlide>
      </Repeater.itemTemplate>
    </Repeater>
  </NASlider:NASlider>
  
</Page>

这样，可以使用 ObservableArray 简单地设置滑块。 <NASliderContainer> 将充当 Repeater 的 itemsLayout，而 <NASliderSlide> 成为 Repeater 的包装 itemTemplate。

属性

<NASlider>

属性 类型 描述
bounce 布尔值 (默认: false) 获取或设置滚动弹跳效果。
currentSlide 视图<NASliderSlide> (只读) 获取当前幻灯片视图。
currentSlideIndex 整数 (只读) 获取当前幻灯片索引。
forceFirstIndicatorVisibility 布尔值 (默认: false) 获取或设置仅有一个幻灯片时第一个指示器的可见性。
showIndicators 布尔值 (默认: true) 获取或设置指示器的可见性。
indicatorBorderColor 字符串 (默认: "#404040") 获取或设置指示器的边框颜色。
indicatorBorderWidth 浮点数 (默认: 0) 获取或设置指示器的边框宽度。
indicatorColor 字符串 (默认: "808080") 获取或设置所有幻灯片的指示器颜色。
indicatorColorActive 字符串 (默认: null) 获取或设置所有幻灯片在活动状态（当前可见幻灯片）时的指示器颜色。
indicatorHorizontalAlignment 字符串 (默认: null) 获取或设置指示器的水平对齐方式。覆盖 indicatorPosition 属性。
indicatorPosition 字符串 (默认: "bottom") 获取或设置指示器的位置。
indicatorSize 浮点数 (默认: 8) 获取或设置指示器的大小。
indicatorVerticalAlignment 字符串 (默认: null) 获取或设置指示器的垂直对齐方式。覆盖 indicatorPosition 属性。
items 数组 (默认: undefined) 获取或设置 <Repeater> 的项目数组。
orientation 字符串 (默认: "horizontal") 获取或设置滑块的排列方向。可以是 "horizontal" 或 "vertical"。
scrollPosition 浮点数 (只读) 获取当前滚动位置。
slidesCount 整数 (只读) 获取幻灯片总数。

<NASliderSlide>

属性 类型 描述
indicatorColor 字符串 (默认: null) 获取或设置特定幻灯片的指示器颜色。
indicatorColorActive 字符串 (默认: null) 获取或设置特定幻灯片在活动状态（当前可见幻灯片）时的指示器颜色。

方法

getSlideAt

getSlideAt(index: integer): <NASliderSlide>

返回指定索引的幻灯片。

参数 类型 描述
index 整数 要返回的幻灯片的索引位置。

insertSlide

insertSlide(view: <View>, props: object): Promise<NASliderSlide>

插入新的幻灯片，可选属性。返回一个 Promise，包含新的幻灯片。

参数 类型 描述
view <View> 要插入的幻灯片视图。
props 对象 (可选) 可选属性。
props
属性 类型 描述
atIndex 整数 (默认: this.slidesCount) 设置索引位置。如果未指定，幻灯片将变为最后。
indicatorColor 字符串 (默认: null) 设置特定幻灯片的指示器颜色。
indicatorColorActive 字符串 (默认: null) 设置活动（当前可见）幻灯片的指示器颜色。

removeSlide

removeSlide(slide: <NASliderSlide>): Promise

移除指定的幻灯片。返回一个 Promise。

参数 类型 描述
slide <NASliderSlide> 要移除的幻灯片。

removeSlideAt

removeSlideAt(index : integer): Promise

移除指定索引的幻灯片。返回一个 Promise。

参数 类型 描述
index 整数 要移除的幻灯片的索引位置。

removeSlides

removeSlides(): Promise

移除所有幻灯片。返回一个 Promise。

如果 <NASlider> 实例由 Repeater 维护，则此功能将不起作用。

scrollToSlideAt

scrollToSlideAt(index : integer, animated : boolean): void

滚动到指定索引的幻灯片。是否有动画效果。

参数 类型 描述
index 整数 要移除的幻灯片。
animated 布尔值 (默认: false) 动画滚动效果。

事件

以下事件可以使用 on() 和 addEventListener() 观察到

slide

在滑动时触发。

事件数据
属性 类型 描述
eventName 字符串 获取事件名称。
object 对象 获取 <NASlider> 实例。
scrollPosition 浮点数 获取当前滚动位置。将根据 <NASlider> 实例的方向是水平还是垂直。

slideChange

当 <NASlider> 实例改变幻灯片时触发。

事件数据
属性 类型 描述
eventName 字符串 获取事件名称。
object 对象 获取 <NASlider> 实例。
slide <NASliderSlide> 获取当前可见的幻灯片。

已知问题

  • 目前尚不支持 Android。

历史

版本 1.1.3 (2017年2月10日)

  • 修复了在框架的 backstack 内导航时的崩溃。

版本 1.1.2 (2017年2月8日)

  • 稳定性改进。
  • 幻灯片现在应动态适应滑块的尺寸。

版本 1.1.0 (2017年2月7日)

  • removeAllSlides 方法已重命名为 removeSlides。
  • 修复了 Repeater 没有按预期工作的问题。请查阅文档了解使用 <NASlider> 的新方法。

版本 1.0.2 (2017年2月6日)

  • 文档修复。

版本 1.0.0 (2017年2月6日)

  • 首次发布！

致谢

许可

MIT - 用于 {N} 版本 2.5.0+