为 nativescript 定制的 CarouselView 插件

设置

tns plugin add nativescript-carousel-view

平台支持

用法

首先添加 xmlns 命名空间

xmlns:controls="nativescript-carousel-view"

然后添加控件

<controls:CarouselView
    id="carouselView"
    position="0"
    orientation="horizontal"
    interPageSpacing="5"
    itemsSource="{{ itemsSource }}"
    templateSelector="{{ templateSelector }}"/>

可绑定属性

orientation: 水平，垂直（默认水平）。

itemsSource: 每页用作绑定上下文的对象集合。

position: Carousel 开始时选定的页码（默认 0）。

interPageSpacing: 页面之间的间距/空间（默认 0）。

interPageSpacingColor: 页面之间间距/空间的颜色（默认 #FFFFFF）。

showIndicators: 显示页面指示器（默认 true）。

IndicatorsShape: 圆形或方形指示器形状（默认圆形）。

indicatorsTintColor: 未选中点的颜色（默认 #c0c0c0）。

indicatorsCurrentPageColor: 选中点的颜色（默认 #808080）。

templateSelector: 实现提供的 ITemplateSelector 接口的类。

animateTransition: 当程序化滑动时启用过渡动画（默认 true）。

模板选择器应返回一个有效的 {N} 视图。建议将每个视图放在单独的文件中，并使用构建器加载它们。另外，请注意，您必须分配返回视图的绑定上下文。

TYPESCRIPT

import { ITemplateSelector } from "nativescript-carousel-view";
import builder = require("ui/builder");
var frame = require('ui/frame');

export class MyTemplateSelector implements ITemplateSelector {
    
    OnSelectTemplate(position: number, bindingContext: any) {

        var page = frame.topmost().currentPage;

        var view = builder.load({
            path: "~/Views/Slides",
            name: "slider-view",
            page: page
        });

        // required
        view.bindingContext = bindingContext;

        return view;
    }
}

ViewModel

import observable = require("data/observable");
import observableArrayModule = require("data/observable-array");
import { MyTemplateSelector } from "../Views/Slides/template-selector";

export class MainViewModel extends observable.Observable {

    public templateSelector: MyTemplateSelector;
    public itemsSource: observableArrayModule.ObservableArray<Person>;

    constructor() {
        super();

        // Initialize default values.

        this.templateSelector = new MyTemplateSelector();

        var person = new Person();
        person.first = "Alexander";
        person.last = "Reyes";

        var items = [ person, person, person, person, person ];
        this.itemsSource = new observableArrayModule.ObservableArray<Person>(items);
    }
}

JAVASCRIPT

"use strict";
var builder = require("ui/builder");
var frame = require('ui/frame');

var MyTemplateSelector = (function () {
    function MyTemplateSelector() {
    }
    MyTemplateSelector.prototype.OnSelectTemplate = function (position, bindingContext) {

        var page = frame.topmost().currentPage;

        var view = builder.load({
            path: "~/Views/Slides",
            name: "slider-view",
            page: page
        });

        view.bindingContext = bindingContext;

        return view;
    };
    return MyTemplateSelector;
}());

exports.MyTemplateSelector = MyTemplateSelector;

ViewModel

"use strict";
var observable = require("data/observable");
var observableArrayModule = require("data/observable-array");
var template_selector = require("../Views/Slides/template-selector");

var MainViewModel = (function (_super) {
    __extends(MainViewModel, _super);
    function MainViewModel() {
        var _this = _super.call(this) || this;
        _this.templateSelector = new template_selector.MyTemplateSelector();
        _this.itemsSource = new observableArrayModule.ObservableArray(items);
        return _this;
    }
    return MainViewModel;
}(observable.Observable));

exports.MainViewModel = MainViewModel;

事件处理程序

positionSelected: 当选定的页面更改时触发。

var carouselView = <CarouselView>page.getViewById("carouselView");

carouselView.on("positionSelected", function(eventData){
    console.log(eventData.eventName + " has been raised! by: " + eventData.object);
});

方法

insertPage (position, bindingContext): 在指定位置插入页面。

await carouselView.insertPage(5, person);
carouselView.setCurrentPage(5);

removePage (position): 删除指定位置的页面（这将同时删除 itemsSource 中的对应项）。

await carouselView.removePage(5);

setCurrentPage (position): 程序化滑动到指定位置。

对 TypeScript 开发者的要求

• TypeScript >= 2.1.1 (npm install -g [email protected])

请遵循此教程将 TypeScript >= 2.1.1 和 async/await 支持添加到您的项目中

https://www.nativescript.org/blog/use-async-await-with-typescript-in-nativescript-today

路线图

• 移除 setCurrentPage，实现为 position 属性 changedEvent（需要大量重构）
• 指示器点击事件
• PullToLoadMore 事件

合作者

• alexrainman

发行说明

2.9.0

[新功能] animateTransition，在程序化滑动时启用过渡动画（默认 true）。

2.8.0

[更新] itemsSource 现在支持空的 observable 数组。

2.7.1

[新功能] Circle 或 Square indicatorsShape 属性（默认 Circle）。

2.6.1

[更新] orientation 属性现在表示为字符串（horizontal，vertical），支持 "ui/enums" 中的 Orientation 枚举。

[新功能] interPageSpacingColor 属性可以更改页面之间间距/空间的颜色（默认 #FFFFFF）。

[新功能] indicatorsTintColor 属性可以更改未选中点的颜色（默认 #c0c0c0）。

[新功能] indicatorsCurrentPageColor 属性可以更改选中点的颜色（默认 #808080）。

2.6.0

[更新] 与 Xamarin.Forms CarouselView 匹配版本号

2.2.0

[iOS] 小幅修复以避免 UIPageViewController.View 超出其容器边界

[更新] showIndicators 属性现在按预期工作，显示/隐藏指示器 :)

[更新] 删除了 itemsSourceChanged 方法，实现为 propertyChangedEvent

2.1.0

[增强] 添加页面指示器

2.0.6

[错误] CSS 未应用于幻灯片 #6（已修复）

[增强] 在 Android 竖向轮播图中移除左右过度滚动

2.0.5

[错误] 向 slider-view 添加另一个触摸手势不工作（已修复）

2.0.4

已更新 README。

2.0.3

[错误] 修复 Android 中的 interPageSpacing。

2.0.2

[错误] carousel 页面未调用 onLoaded()（已修复）。

许可证

MIT。

从 CarouselView 移植到 Xamarin.Forms：https://github.com/alexrainman/CarouselView