vue-awesome-swiper轮播图实践(E积分)

最新推荐文章于 2023-08-29 16:47:56 发布

转载最新推荐文章于 2023-08-29 16:47:56 发布 · 81 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/ourLifes/p/8523544.html

文章标签：

#javascript #ViewUI

本文介绍如何使用vue-awesome-swiper插件实现Vue项目的轮播图功能。从安装配置到组件应用，再到具体代码实例，全面解析轮播图的实现过程。

选择vue-awesome-swiper插件的原因是，他就是根据swiper插件改写而来的，功能齐全，模式多种，而我又刚好在swiper官网看到该种特效。

1、进入项目目录，安装swiper

npm install vue-awesome-swiper --save

2、main.js里要引入资源

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

3、编辑组件　我是用v-for遍历data里的数组来形成轮播图的，也可以不使用v-for直接写多个swiper-slide组件。如果使用遍历的方法需要注意的是必须要加上:key="item.id"，否则会报错。

 <div class="swiperWrap">
	<swiper :options="swiperOption" ref="mySwiper">
		<swiper-slide v-for='item in swiperArr' :key="item.id">
			<img :src="item.url">
		</swiper-slide>
		<div id="swiperOwn" class="swiper-pagination" slot="pagination"></div>
	</swiper>
</div>

4、引入相关组件

<script> 
import { swiper, swiperSlide } from 'vue-awesome-swiper'
	export default{
		//轮播图引入组件
		components: {
		    swiper,
		    swiperSlide,	
		},

5、data里写入初始值（初始化）我只写了基本的常用swiper轮播属性，有特殊需求的可以去swiper中文网看具体的api

data(){
	return{
//		轮播图
			swiperOption: {
		          spaceBetween: 30,
		          centeredSlides: true,
		          autoplay: {
		            delay: 2000,
		            disableOnInteraction: false
		          },
		          pagination: {
		            el: '.swiper-pagination',
		            clickable: true
		          }
		       },

PS：轮播图底部分页样式，需要把当前页焦点的active改成红色，由于轮播图组件是以子组件的方式引入，父组件style又设置了scoped ，在父组件里设置轮播图样式时css不起作用，当时解决办法是在common.css全局样式表里设置的轮播图样式。

参照：https://www.cnblogs.com/zishang91/p/7600006.html

转载于:https://www.cnblogs.com/ourLifes/p/8523544.html