vue-awesome-swiper做滑动效果

时间：2019-12-23 13:14:20 收藏：0 阅读：204

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>

原文：https://www.cnblogs.com/chenglianjie/p/12082971.html