uniapp轮播图的使用

关于uniapp轮播图的使用

轮播图采用的是uniapp官网的轮播图，只是平时使用记录一下，如有需要可供初学者参考

<!-- 轮播图 -->
		<view class="swiper-container">
			<uni-swiper-dot class="uni-swiper-dot-box" :info="BannerList" :current="current" :mode="mode"
				:dots-styles="dotStyle" field="content">
				<swiper class="swiper-item" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
					:interval="interval" :duration="duration" indicator-color="#8a8a8a" indicator-active-color="#CB8E3E"
					:current="swiperDotIndex" @change="change">
					<swiper-item class="swiper-item" v-for="(item,index) in BannerList" :key="index">
						<image :src="$API_URL+item.ban_image" mode=""></image>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>

说明：

1.这里使用了后台获取的轮播图BannerList，如果是固定轮播图的话，你也可以选择直接写
2.current 当前指示点的索引值
3.mode 指示点的类型，可选值：default 、round 、nav 、 indexes
5.只是自己记录使用，更多了解可以去官网查看：
https://uniapp.dcloud.net.cn/component/uniui/uni-swiper-dot.html#%E7%A4%BA%E4%BE%8B

下面是上方代码用到的data数据

BannerList: [], //轮播图
indicatorDots: false,
autoplay: true,
interval: 2000,
duration: 500,
dotStyle: {
	backgroundColor: ' #F7F7F7',
	border: 'none',
	color: '#444',
	selectedBackgroundColor: '#CB8E3E',
	selectedBorder: '1px rgba(152, 101, 35, 0.4) none'
},
current: 0,
mode: 'dot',
swiperDotIndex: 0,

轮播图的change方法在methods里面写一下，其他更多方法可以去官网了解

change(e) {
	this.current = e.detail.current
},

用到的CSS样式

.swiper-container {
			margin-top: -50rpx;

			.swiper-item {
				width: 710rpx;
				height: 282rpx;
				margin: 0 auto;
				border-radius: 20rpx;

				image {
					width: 100%;
					height: 100%;
					border-radius: 20rpx;
				}
			}
		}