vue-awesome-swiper做滑动效果

Posted 2021-03-21 chenglianjie

1.swiper官网

https://www.swiper.com.cn/

里面的在vue里面使用swiper 进入 https://github.com/surmon-china/vue-awesome-swiper

然后  npm install vue-awesome-swiper --save  下载到依赖包

引用（这里是按需引用） 然后定义一下 一页出现几个 

<script>
	// 引入vue-awesome-swiper
	import ‘swiper/dist/css/swiper.css‘
	import { swiper, swiperSlide } from ‘vue-awesome-swiper‘
	export default {
		data(){
			return{
				swiperOption: {
					// 一页出现几个
				          slidesPerView:3,
				        }
			}
		},
	  components: {
	    swiper,
	    swiperSlide  
	  }  
	}
</script>

 模板里

<swiper class=‘hot-swiper‘ :options="swiperOption">
		<swiper-slide >
			<div class="hot-swiper-content">
				<img src="./img/1.jpg"  style="width:100px;"> 
				  <div>图片1</div>
				  <div>10</div>
			</div>
		</swiper-slide> 
<swiper>