uni-app混合开发模式是目前常用的一种开发方式，本文简要介绍如何使用swiper实现图片轮播及v-for的循环使用！

效果预览：

代码：

<template>
    <view>
        <view class="uni-padding-wrap">
            <view class="page-section swiper">
                <view class="page-section-spacing">
                    <swiper  class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
                        <swiper-item v-for="(item,index) in background" :key="index">
                            <view class="swiper-item ">
				<image :src="item.img" mode="widthFix" class="width100"></image>
			    </view>
                        </swiper-item>
                    </swiper>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
	export default {
		data() {
			return {
				background: [
					{img:'https://www.baidu.com/img/bd_logo1.png'},
					{img:'https://www.baidu.com/img/bd_logo1.png'},
					{img:'https://www.baidu.com/img/bd_logo1.png'}
				],
				indicatorDots: true,
				autoplay: true,
				interval: 5000,
				duration: 500
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
	
</style>

注：width100为width:100%

参数解释：大家可以查看官网！

https://uniapp.dcloud.io/component/swiper