вот примеры создания компонента карусели изображений в React, Angular и Vue:
Реагировать:
import React, { useState } from 'react'; const ImageCarousel = ({ images }) => { const [currentImage, setCurrentImage] = useState(0); return ( <div> <img src={images[currentImage]} /> <button onClick={() => setCurrentImage(currentImage - 1)}>Previous</button> <button onClick={() => setCurrentImage(currentImage + 1)}>Next</button> </div> ); }; export default ImageCarousel;
В примере React определен функциональный компонент с именем ImageCarousel
, который принимает массив изображений в качестве реквизита. Компонент использует хук useState
для отслеживания текущего индекса изображения в переменной состояния currentImage
. Компонент отображает элемент img
с src
, установленным для текущего изображения, и двумя кнопками «Предыдущий» и «Далее», которые используются для перехода между изображениями. При нажатии кнопки «Предыдущий» вызывается функция setCurrentImage
с индексом текущего изображения, уменьшающимся на 1, а при нажатии кнопки «Далее» он увеличивается на 1.
Угловой:
import { Component } from '@angular/core'; @Component({ selector: 'image-carousel', template: ` <img [src]="images[currentImage]" /> <button (click)="previousImage()">Previous</button> <button (click)="nextImage()">Next</button> ` }) export class ImageCarousel { currentImage = 0; previousImage() { this.currentImage--; } nextImage() { this.currentImage++; } }
В примере с Angular компонент ImageCarousel
определяется с помощью декоратора @Component
. Компонент имеет шаблон, который включает элемент img
с его src
, привязанным к свойству currentImage
компонента, и две кнопки «Предыдущий» и «Далее», которые используются для перехода между изображениями. Компонент также имеет два метода, previousImage()
и nextImage()
, которые вызываются при нажатии соответствующих кнопок, и они просто уменьшают или увеличивают свойство currentImage
на 1.
Вид:
<template> <div> <img :src="images[currentImage]" /> <button @click="previousImage">Previous</button> <button @click="nextImage">Next</button> </div> </template> <script> export default { data() { return { currentImage: 0 } }, methods: { previousImage() { this.currentImage--; }, nextImage() { this.currentImage++; } } } </script>
В примере Vue определен однофайловый компонент с именем ImageCarousel
, который включает в себя шаблон и скрипт. Шаблон включает элемент img
, src
которого привязан к свойству данных currentImage
компонента, и две кнопки «Предыдущий» и «Далее», которые используются для перехода между изображениями. Сценарий определяет объект data
, который включает свойство currentImage
, установленное на 0, и два метода, previousImage()
и nextImage()
, которые вызываются при нажатии соответствующих кнопок, и они просто уменьшают или увеличивают свойство currentImage
на 1.
Все примеры кода схожи по функциональности, они отличаются только синтаксисом и способом обработки состояний и событий.
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .
Заинтересованы в масштабировании запуска вашего программного обеспечения? Ознакомьтесь с разделом Схема.