Angular 2 适用于手机端的旋转木马滑块组件

Angular 2 适用于手机端的旋转木马滑块组件
插件名称 ngCarouselDirective
发布时间 2020年9月1日
插件作者 alcoceba

适用于iOS和Android的简单NativeScript + Angular 2图像轮播。

安装:

$ npm install nativescript-ng2-carousel

通过npm将模块下载并安装到您的Nativescript项目中:

cd your_tns_project_path/
npm install nativescript-ng2-carousel --save

将CarouselDirective类添加到声明NgMoudle元数据中:

@NgModule({
    declarations: [AppComponent, CarouselDirective],
    bootstrap: [AppComponent],
    imports: [NativeScriptModule],
    schemas: [NO_ERRORS_SCHEMA]
})

要使用CarouselDirective,请创建一个模板,该模板将指令作为属性应用于段落GridLayout元素:

<GridLayout [carousel]="images" carouselLabelOverlay="true" carouselSpeed="2000">
    
</GridLayout>

将图像从URL添加到您的组件:

@Component({
    selector: "my-app",
    templateUrl: "app.component.html"
})
export class AppComponent {

    protected images: Array = [];

    constructor() {
        this.images = [
            { title: 'Image 1', url: 'https://unsplash.it/400/300/?image=867' },
            { title: 'Image 2', url: 'https://unsplash.it/400/300/?image=870' },
            { title: 'Image 3', url: 'https://unsplash.it/400/300/?image=876' },
        ];
    }
}

您还可以使用属性而不是属性从资产文件夹资源文件夹添加图像:fileurl

@Component({
    selector: "my-app",
    templateUrl: "app.component.html"
})
export class AppComponent {

    protected images: Array = [];

    constructor() {
        this.images = [
            { title: 'Image 1', url: 'https://unsplash.it/400/300/?image=867' },
            { title: 'Image 2', file: '~/assets/sea-sunset.jpg' },
            { title: 'Image 2', file: 'res://mountain' }, // Resource without extension
            { title: 'Image 3', url: 'https://unsplash.it/400/300/?image=876' },
        ];
    }
}

CSS样式:

/** Slider image */
.slider-image {

}

/** Slider title format */
.slider-title {
    color: #fff;
    font-weight: bold;
    background-color: rgba(125, 125, 125);
    padding: 8;
    text-align: center;
    vertical-align: bottom;
}

/** Arrows */
.arrow {
    color: #ffffff;
    font-size: 32;
    vertical-align: middle;
    padding: 10;
}

/** Arrow left wrapper */
.arrow.arrow-left {

}

/** Arrow right */
.arrow.arrow-right {

}

支持的属性

当前指令支持的属性:

  • carousel  图片列表,如JSON或CarouselSlide类,可接受的参数(标题,网址,文件)
  • carouselSpeed (可选)定义了在显示下一张幻灯片之前要等待的间隔(以毫秒为单位)
  • carouselAnimationSpeed (可选)定义动画速度(以毫秒为单位的数字)
  • carouselArrows (可选)箭头类型,可接受的值nonesmallnormalbold狭窄(默认normal
  • carouselLabelOverlay (可选)在图像上的silde标题,接受的值为truefalse(默认为false)