VUE

VUE

vue的 Swiper使用

template:

<div class="slider">
		<swiper :options="swiperOption" ref="mySwiper">
			<swiper-slide  v-for="item in carousel" :key="item.id" class="swiperSlide">
				<a :href="item.linkUrl">
					<img :src="item.picUrl" alt="轮播图">
				</a>
			</swiper-slide>
			<div class="swiper-pagination" slot="pagination"></div>
		</swiper>
	</div>

script:

<script>
import { apiGetCarousle } from 'api/getRecomData'
	export default{
		name:'carousel',
		data(){
			return{
				swiperOption:{
					// 每张播放时长
					autoplay:{
						delay:3000,
						disableOnInteraction: false//用户操作swiper之后自动切换不会停止
					},
		  setWrapperSize :true,
		//  swiper-pagination 参数选项,显示小点
          pagination:{
          	el:'.swiper-pagination',
          	clickable:true//点击分页器的指示点分页器是否会控制Swiper切换
          },
          loop:true,//循环
          mousewheel: true,//鼠标的滚轮是否可以控制Swipers
          observeParents:true,//当Swiper的父元素变化时，例如window.resize，Swiper更新。
          autoplayDisableOnInteraction: false//用户操作swiper之后自动切换不会停止
				},
				carousel:[]//接收引入的数据
			}
		},
		created(){
			//引入数据接口
			apiGetCarousle().then((res)=>{
				if(res.code===0){
					this.carousel=res.data.slider
				}
			})
		}
	}
</script>

style:

<style lang="stylus" scoped>
		.swiperSlide
			img
				width:100%
</style>

router.js

// 轮播图
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)