HBuilder X implements banner carousel

The first step is to read the official document carefully and find the swiper in the built-in component under the component, as shown in the figure

The official provides a slider view container for making carousels: swiper  Generally speaking, the image address of the carousel is returned by the back end to the front end to traverse and display on the page, so the basic structure can be written like this :

		<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>

Four pictures are prepared here, and then the simulated join backend returns the picture address, and the data looks like this:

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

The final effect, if shown:

 The above is just a simple carousel image, and there are some attributes that can be used. For example, the commonly used ones are:

1. Circular: Whether to use the connection sliding, that is, to return to the beginning after playing to the end
2. indicator-active-color: the color of the currently selected indicator point
3. indicator-dots: Whether to display panel indicator dots

For more attributes, please refer to the official documentation, pay attention to platform differences:

 Today is another day of hard work and progress!