Карусель с нативным скриптом - PullRequest
Новая
       24

Карусель с нативным скриптом

0 голосов
/ 19 февраля 2019

Как я могу создать карусель с nativescript-vue?Я могу создать пару отдельных компонентов, таких как welcome1.vue, welcome2.vue, с помощью кнопки и анимации, но я понятия не имею, как добавить точки, чтобы сделать их настоящей каруселью / вводным потоком.Я знаю, что для этого есть плагин NS, но я не уверен, как его интегрировать в VUE Project.

Любая помощь будет признательна!

Ответы [ 2 ]

0 голосов
/ 19 февраля 2019

Использование 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

0 голосов
/ 19 февраля 2019

Вы пробовали nativescript-пейджер , он имеет официальную поддержку Vue и тоже получил приложение demo .

...