具有nativescript-vue的轮播

Question

如何使用nativescript-vue创建轮播？我可以使用按钮和动画创建几个单独的组件，例如welcome1.vue，welcome2.vue，但是我不知道如何添加点使其成为真正的轮播/介绍流程。我知道有一个NS插件，但是我不确定如何将其集成到vue项目中。

任何帮助，将不胜感激！

Answer 1

使用https://github.com/manijak/nativescript-carousel

npm install nativescript-carousel

然后跑 rm -rf platforms

在您的应用中注册插件

打开您的app.js或main.js并在顶部添加以下行： Vue.registerElement('Carousel', () => require('nativescript-carousel').Carousel) Vue.registerElement('CarouselItem', () => require('nativescript-carousel').CarouselItem)

要把它放到你的VUE组件： 记住以翘曲<Carousel>内<GridLayout>，如果你的Android。

<Carousel height="100%" width="100%"
  pageChanged="myChangeEvent" pageTapped="mySelectedEvent"
  indicatorColor="#fff000" finite="true" bounce="false"
  showIndicator="true" verticalAlignment="top"
  android:indicatorAnimation="swap" color="white"
>
    <CarouselItem id="slide1" backgroundColor="#b3cde0" verticalAlignment="middle">
        <Label text="Slide 1" backgroundColor="#50000000" horizontalAlignment="center"/>
    </CarouselItem>
    <CarouselItem id="slide2" backgroundColor="#6497b1" verticalAlignment="middle">
        <Label text="Slide 2" backgroundColor="#50000000" horizontalAlignment="center"/>
    </CarouselItem>
    <CarouselItem id="slide3" backgroundColor="#005b96" verticalAlignment="middle">
        <Label text="Slide 3" backgroundColor="#50000000" horizontalAlignment="center"/>
    </CarouselItem>
    <CarouselItem id="slide4" backgroundColor="#03396c" verticalAlignment="middle">
        <Label text="Slide 4" backgroundColor="#50000000" horizontalAlignment="center"/>
    </CarouselItem>
</Carousel>

然后跑 tns run android --bundle