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

您可以将Gesture用于此过程

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扩展/插件

2 个答案: