Карусель с nativescript-vue

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

Любая помощь будет оценена по достоинству!


nativescript carousel nativescript-vue
person arena    schedule 19.02.2019    source источник

Ответы (2)


arrow_upward
7
arrow_downward

Используйте 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

person ding_ding    schedule 19.02.2019
comment
Ух ты! Огромное спасибо за развернутый ответ! Рад иметь такой плагин для этого! Спасибо! - person arena; 20.02.2019
comment
Он работает правильно, однако, когда я перемещаюсь от 1 к 2, во время перехода вверху появляется белое поле, которое исчезает. Как я могу это отключить? (Использование ios) Спасибо за ответ! - person arena; 20.02.2019
comment
@arena Я не знаю. Я знаю только, как использовать этот плагин в Vue.js. Вы можете изучить более подробную информацию в этом плагине. - person ding_ding; 20.02.2019
comment
Спасибо за заметку: не забудьте деформировать ‹Carousel› внутри ‹GridLayout›, если вы Android. - person Hamid Javadi; 30.01.2020

arrow_upward
0
arrow_downward

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

person Manoj    schedule 19.02.2019
comment
Очень признателен за ваш комментарий, я проверю это! - person arena; 20.02.2019