在vue中使用vue-awesome-swiper遇见的问题随手笔记

在vue中使用vue-awesome-swiper的loop遇见的问题随手笔记

一.使用分页器小圆点显示不出来

原因：vue-awesome-swiper的版本太高，不兼容更换版本低的vue-awesome-swiper我当时用的是最新版本的，然后更换成

npm i vue-awesome-swiper@3

分页器正常显示出来

二.自动播放和循环播放不管用

解决方法：

这里的

v-if="getHomeMultidata.length>1"

中的getHomeMultidata是我轮播图请求回来的数据

三.在引用轮播图时遇见css引入报错的问题

1.安装

npm i vue-awesome-swiper@3

2.引入

// 引入轮播图
import VueAwesomeSwiper from 'vue-awesome-swiper'
//下面的两个都是轮播图样式的引入但是我当时引入import 'swiper/dist/css/swiper.css'报错于是引入import 'swiper/swiper-bundle.css'
import 'swiper/swiper-bundle.css' 
//import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)

3.在组件中的使用

<template>
	<div id="home">
		<div class="homeSwiper">
			<swiper ref="mySwiper" :options="swiperOptions" v-if="getHomeMultidata.length>1">
				<swiper-slide v-for="(data,index) in getHomeMultidata" :key="index">
					<a :href="data.link">
						<img :src="data.image" :alt="data.title">
					</a>
				</swiper-slide>
				<div class="swiper-pagination" slot="pagination"></div>
			</swiper>
		</div>

	</div>
</template>

<script>
	import {
		getHomeMultidata
	} from '../../network/home.js'
	export default {
		data() {
			return {
				getHomeMultidata: [],
				// 设置swiper的配置
				swiperOptions: {
					pagination: {
						el: '.swiper-pagination',
						clickable: true // 允许点击小圆点跳转
					},
					autoplay: true,
					speed: 400,
					loop: true
				}
			}
		},
		created() {
			
		},
		methods:{
			
		},
		mounted() {
			// 请求轮播图数据
			getHomeMultidata()
			.then(res => {
				this.getHomeMultidata = res.data.banner.list
				console.log(this.getHomeMultidata)
			})
		}
	}