Nativescript PhotoSlider 扩展/插件

Question

nativescript 中有平滑照片滑块的插件或扩展吗？我尝试使用滑动方向，但我希望照片具有平滑的滑动效果。谢谢 :)

Answer 1

你想要一个水平滑块，用户可以从侧面滑动图像吗？

如果是这样，一个简单的 ScrollView 就可以了。

<Page>
 <ScrollView orientation="horizontal">
   <Image src="~/image1.png" />
   <Image src="~/image2.png" />
   <Image src="~/image3.png" />
   <Image src="~/image4.png" />
 </ScrollView>
</Page>

另请参阅 ScrollView 的文档：https://docs.nativescript.org/ApiReference/ui/scroll-view/HOW-TO.html

Answer 2

您可以在此过程中使用手势

import { SwipeGestureEventData } from "ui/gestures";
export class XXX{
public direction: number;
private images:any[] = ["image url", "image url","image url","image url"];
public current_image;
private image_lenght;
private current_image_count=0;

constructor() {
    this.image_lenght = this.images.length;
    this.current_image = this.images[this.current_image_count];
}

private onSwipe(args: SwipeGestureEventData) {
      direction = args.direction;
    /*left to right direction = 1
    right to left direction = 2
    top to bottom direction = 8
    bottom to top direction = 4*/


    switch (this.direction) {
        case 1:
            if(this.current_image_count != 0)
                this.current_image_count --;
            break;

        case 2:
            if(this.current_image_count < (this.image_lenght) -1)
                this.current_image_count ++;
            break;

        case 4:
            // code...
            break;

        case 8:
            // code.
            break;


        default:
            // code...
            break;
    }

    this.current_image = this.images[this.current_image_count];
  }
}

有关 Nativescript 手势的更多信息 angular refer here

Nativescript PhotoSlider 扩展/插件

Nativescript PhotoSlider Extension / Plugin

photo

slider

nativescript