[JavaScript知识库]Vue关于swiper轮播图组件的小细节

在写项目过程中遇到swiper组件小圆点怎么都不显示，
解决方法：

1.首先先下载swiper组件

	npm install vue-awesome-swiper@2.6.7 --save

@后面版本号可以删掉，默认最新版

2.在main.js中引入

import VueAwesomeSwiper from 'vue-awesome-swiper'

import 'vue-awesome-swiper/node_modules/swiper/dist/css/swiper.css'
//这个好像会不太一样，我的就是
//import 'swiper/swiper-bundle.css'

Vue.use(VueAwesomeSwiper)

中间这个具体去node_modules/swiper里面去看看

3.写成组件

<template>
<swiper :options="swiperOptions" class="swiper">
	<swiper-slide v-for="(item, key) in swiperList" :key="key">
      <img :src="item.imgUrl" alt="" />
  </swiper-slide>

<div class="swiper-pagination" slot="pagination">1</div>
</swiper>
</template>

<script>
export default {
  name: 'carrousel',
  data() {
 return {
	  swiperList: [
	    { id: '01', imgUrl: require('../../../assets/img/swiper/lbt.jpg') },
   	    { id: '02', imgUrl: require('../../../assets/img/swiper/lbt2.jpg') },
	    { id: '03', imgUrl: require('../../../assets/img/swiper/lbt3.jpg') },
   	   { id: '04', imgUrl: require('../../../assets/img/swiper/lbt4.jpg') }
  ],
  swiperOptions: {
    pagination: '.swiper-pagination',
    loop: true
  }
}
  }
}
</script>

<style scoped lang="stylus">
.swiper {
  width: 100%;
  height: 100px;
}

.swiper img {
  width: 100%;
 height: 100%;
}


</style>

如果这样不报错，但是不显示小圆点的话，一定是版本问题，可能最新版有些改动，所以可以用我前面放的版本，等了解新版后再更新