nativescript-swiper

适用于 iOS 平台的滑动功能原生插件，基于 iOS 原生 UIScrollView，响应快速且可用性高

为什么不支持 Android

如您所知，滑动功能可以通过原生 Android 开发中的 "ViewPager" 组件实现。在 Android 平台上，NativeScript 的 "TabView" 组件是 TabLayout 小部件和 ViewPager 小部件的组合。因此，我们可以通过移除标题标签来使用 NativeScript 的 "TabView" 组件作为滑动：tabview._tabLayout.setVisibility(android.view.View.GONE);

有关此问题的讨论如下：TabView 无标签

截图

安装

tns plugin add nativescript-swiper

用法

xmlns:Swiper="nativescript-swiper"

示例用法

XML

	<Swiper:SwiperContainer 
            id="swiper-container"
            change="onChanged" 
            cancell="onCancelled" 
            start="onStart" 
            finish="onFinished">
        <Swiper:SwiperWrapper id="swiper-wrapper">
            <Swiper:SwiperSlide class="bg-blue" height="100%"  verticalAlignment="center">
                <Label text="Panel 1" color="#fff" textWrap="true" verticalAlignment="center" horizontalAlignment="center" />
            </Swiper:SwiperSlide>
            <Swiper:SwiperSlide class="bg-green" height="100%"  verticalAlignment="center">
                <Label text="Panel 2" color="#fff" textWrap="true" verticalAlignment="center" horizontalAlignment="center" />
            </Swiper:SwiperSlide>
            <Swiper:SwiperSlide class="bg-red" height="100%"  verticalAlignment="center">
                <Label text="Panel 3" color="#fff" textWrap="true" verticalAlignment="center" horizontalAlignment="center" />
            </Swiper:SwiperSlide>
        </Swiper:SwiperWrapper>
    </Swiper:SwiperContainer>

SwiperContainer 方法

• nextSlide(animated : boolean) - 导航到右侧幻灯片（如果动画，则使用 animate 动画过渡）
• previousSlide(animated : boolean) - 导航到左侧幻灯片（如果动画，则使用 animate 动画过渡）
• goToSlide(index : number,animated : boolean) - 跳转到指定索引的幻灯片（如果动画，则使用 animate 动画过渡）
• refresh() - 在幻灯片项更改（添加幻灯片、删除幻灯片或方向更改）时刷新 swiper，以防 currentIndex 和 slidesCount 计算不正确。

SwiperContainer 属性

• currentIndex : number - 获取幻灯片的当前索引（只读，从 0 开始）。

事件和事件数据

• start - 开始滑动
  • object : 触发事件的 Observable 实例。
  • eventName : 事件的名称。
  • currentIndex : 幻灯片的当前索引（从 0 开始）。
  • slidesCount : 所有幻灯片的数量。
• changed - 过渡完成
  • object : 触发事件的 Observable 实例。
  • eventName : 事件的名称。
  • preIndex : 当前幻灯片过渡的旧索引。
  • currentIndex : 幻灯片的当前索引（从 0 开始）。
  • slidesCount : 所有幻灯片的数量。
• cancelled - 过渡未完成
  • object : 触发事件的 Observable 实例。
  • eventName : 事件的名称。
  • currentIndex : 幻灯片的当前索引（从 0 开始）。
  • slidesCount : 所有幻灯片的数量。
• finished - 最后一个幻灯片已进入视图
  • object : 触发事件的 Observable 实例。
  • eventName : 事件的名称。
  • currentIndex : 幻灯片的当前索引（从 0 开始）。
  • slidesCount : 所有幻灯片的数量。
• scroll - SwiperContainer 滚动（将多次触发）
  • object : 触发事件的 Observable 实例。
  • eventName : 事件的名称。
  • scrollX : SwiperContainer ScrollView 的水平偏移量。
  • slidesCount : 所有幻灯片的数量。

与 Repeater 一起使用

nativescript-swiper 可以轻松与 Repeater 一起使用

	<Swiper:SwiperContainer >
              <Repeater items="{{ items }}">
                  <Repeater.itemsLayout>
                      <Swiper:SwiperWrapper />
                  </Repeater.itemsLayout>
                  <Repeater.itemTemplate>
                      <Swiper:SwiperSlide height="100%" verticalAlignment="center">
                          <Label text="{{ 'Panel in Repeater ' + ($value + 1) }}" color="#000" textWrap="true" verticalAlignment="center" horizontalAlignment="center" />
                      </Swiper:SwiperSlide>
                  </Repeater.itemTemplate>
              </Repeater>
          </Swiper:SwiperContainer>   

	var Observable = require("data/observable").Observable;
	
	var source = new Observable();
    var items = [];
    for(var i = 0;i < 10;i++){
        items.push(i);
    }
    source.set("items", items);
    page.bindingContext = source;
    

动态添加或删除幻灯片

只需在任何时候将 SwiperSlide 项添加到 SwiperWrapper 中即可

	var platformModule = require("platform");
	var swiperWrapper = page.getViewById("swiper-wrapper");
	
	var SwiperSlide = require("nativescript-swiper").SwiperSlide;
    var newSwiperSlideItem = new SwiperSlide();
    newSwiperSlideItem.height = "100%";
    newSwiperSlideItem.backgroundColor = "#000";
    newSwiperSlideItem.verticalAlignment = "center";
    var LabelModule = require("ui/label");
    var label = new LabelModule.Label();
    label.text = "this is a new SwiperSlide item,tap to remove it";
    label.color = "#fff";
    label.verticalAlignment = "center";
    label.horizontalAlignment = "center";
    newSwiperSlideItem.addChild(label);
    
    swiperWrapper.addChild(newSwiperSlideItem);
    label.on('tap',function(args){
        swiperWrapper.removeChild(newSwiperSlideItem);
    });
    

处理应用程序方向更改

当应用程序方向更改时，幻灯片应更改其宽度以填充屏幕

将此代码添加到页面 navigatedTo 事件

	var app = require('application');
	var swiperContainer = page.getViewById("swiper-container");
	var swiperWrapper = page.getViewById("swiper-wrapper");
	app.on(app.orientationChangedEvent, function (args) {
        setTimeout(function() {
            swiperWrapper.eachLayoutChild(function(slide){
                slide.width = platformModule.screen.mainScreen.widthDIPs;
                swiperContainer.refresh();
            })
        }, 10);
    })
	    

目前尚不完美，将很快迭代，欢迎贡献者和问题

许可证

MIT