带有 nativescript-vue 的旋转木马

Question

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

如有任何帮助，我们将不胜感激！

Answer 1

你试过 nativescript-pager, it has official support for Vue and got a demo app to.

Answer 2

使用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 组件中： 如果您是 Android.

，请记住将 <Carousel> 扭曲到 <GridLayout> 内

<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

带有 nativescript-vue 的旋转木马

Carousel with nativescript-vue

carousel

nativescript

nativescript-vue