HBuilder X реализует карусель баннеров

Первый шаг — внимательно прочитать официальный документ и найти свайпер во встроенном компоненте под компонентом, как показано на рисунке

Официальный предоставляет слайдер-контейнер представления для создания каруселей: swiper.  Вообще говоря, адрес изображения карусели возвращается из задней части во внешний интерфейс для перемещения и отображения на странице, поэтому базовую структуру можно записать следующим образом:

		<view class="banner">
			<!-- 是否轮播:indicator-dots  自动播放:autoplay  间隔周期:interval  动画执行周期:duration -->
			<swiper :indicator-dots="true" :autoplay="true" :interval="8000" :duration="1000">
				<swiper-item v-for="(item,index) in bannerList" :key="index">
					<img :src="item.url" alt="">
				</swiper-item>
			</swiper>
		</view>

Здесь подготавливаются четыре изображения, а затем смоделированный бэкенд соединения возвращает адрес изображения, и данные выглядят следующим образом:

		data() {
			return {
				// 假设后端返回的数据长这个样子
				bannerList: [{
					url: "static/spring.png"
				}, {
					url: "static/summer.png"
				}, {
					url: "static/autumn.png"
				}, {
					url: "static/winter.png"
				}]
			}
		},

Конечный эффект, если он показан:

 Выше приведено простое изображение карусели, и есть некоторые атрибуты, которые можно использовать, например, наиболее часто используемые:

1. Круговой: использовать ли скользящее соединение, то есть вернуться к началу после воспроизведения до конца
2. индикатор-активный-цвет: цвет текущей выбранной точки индикатора
3. индикатор-точки: отображать ли точки индикатора панели

Для получения дополнительных атрибутов обратитесь к официальной документации, обратите внимание на различия платформ:

 Сегодня еще один день напряженной работы и прогресса!