带有 nativescript-vue 的轮播

Posted 2023-04-14

【中文标题】带有 nativescript-vue 的轮播

【英文标题】：Carousel with nativescript-vue

【发布时间】：2019-07-12 11:37:02

【问题描述】：

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

任何帮助将不胜感激！

【参考方案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  
  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

【讨论】：

哇！非常感谢您的详细回答！很高兴有这样的插件！谢谢！

它可以正常工作，但是当我从 1 滑到 2 时，过渡期间顶部会出现一个白框并消失。我怎样才能禁用它？ （使用ios）感谢您的回答！

@arena 我不知道。我只知道如何在 Vue.js 中使用这个插件。您可以在此插件中探索更多细节。

感谢您的留言：如果您是 Android，请记住在 中扭曲 。

【参考方案2】：

你试过nativescript-pager了吗，它有对Vue的官方支持，也有一个demo的应用程序。

【讨论】：

非常感谢您的评论，我会检查一下！