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

Answer 2

您尝试过nativescript-pager，它对Vue具有官方支持，并且也有一个demo应用程序。

具有nativescript-vue的轮播

2 个答案: