如何用swiper实现轮播

1.基本介绍

1.1 官方地址

    话不多说，直接看官网链接吧www.swiper.com.cn/。

具体的轮播长什么样呢？这里给官网上首页的图（下图1），这其实就是一个最简单的轮播的实现。

当然，这里还添加了自动播放功能，截图无法展现出来。自动播放是用autoplay来控制的，如autoplay: true/autoplay: false。

1.2 如何安装

无论你习惯使用npm还是yarn，安装起来都是一件特别容易的事情，这里以4.0.7版本为例：

npm i -D swiper@4.0.7，或者yarn add -D swiper@4.0.7

安装完成之后就可以在你的package.json文件里面看到对应版本的swiper出现了。

1.3 场景

下面我列举几个常见的场景吧。

（1）淘宝或者天猫的商城（PC端/app端），只要点击进入首页就能看到轮播的商品或者优惠信息；

（2）美团（PC端/app端）,同样也是在首页轮播优惠的商品信息等等；

（3）其实大多数，可以说几乎。类似于美团、饿了么、去哪儿等营销类的网站都会有轮播的功能。

2. 开始使用吧

2.1 如何封装组件

    假设设计师设计的页面跟我们直接使用swiper的轮播效果是不一致的，这个时候你就需要将swiper进行封装，抽象成一个组件来达到复用的目的。

    我个人的习惯是：以swiper为基础，去修改不满足要求的地方：如样式（包括颜色，字体，分页器的形状，大小等等）、前后翻页功能怎么呈现这些问题。

2.2 开始封装

取名slider.vue（名称随意，根据个人喜好），内容如下：

<template>
  <div>
    <swiper class="swiper" :options="swiperOption">
      <swiper-slide v-for="(item, idx) in sliderLists" :key="idx + '_slider'">
        <div class="title">{{ item.name }}</div>
        <div class="desc">{{ item.description }}</div>
        <n-btn icon="lineIcon-download" class="download-wrapper">{{ item.buttonName }}</n-btn>
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
      <div class="swiper-button-prev" slot="button-prev" v-if="isPrev"></div>
      <div class="swiper-button-next" slot="button-next" v-if="isNext"></div>
    </swiper>
  </div>
</template>

<script>
  import {
    Swiper,
    SwiperSlide
  } from 'vue-awesome-swiper';
  import 'swiper/dist/css/swiper.css';
  export default {
    name: 'swiper-multiple-slides',
    props: {
      options: {
        required: true,
        type: Object,
      },
      sliders: {
        required: true,
        type: Array,
      },
      isPrev: {
        required: false,
        type: Boolean,
        default: false,
      },
      isNext: {
        required: false,
        type: Boolean,
        default: false,
      },
    },
    components: {
      Swiper,
      SwiperSlide,
    },
    data() {
      return {};
    },
    computed: {
      swiperOption() {
        return this.$props.options;
      },
      sliderLists() {
        return this.$props.sliders;
      },
    },
    methods: {},
  }
</script>
<style lang="less" scoped>
  @import '~@/less/baseSlider';
</style>

baseSlider存放了一些样式，内容如下：

@import "~@/less/ncp";
.swiper {
  width: @slider-width;
  .swiper-slide {
    .title {
      font-size: 15px;
      line-height: 1.5;
      font-weight: bold;
    }
    .desc {
      font-size: 15px;
      line-height: 1.5;
      margin: 5px 0 20px;
    }
    .download-wrapper {
      padding: 0;
      display: block;
      width: 107px;
      height: 32px;
      border-radius: 4px;
      border: solid 1px #aaaaaa;
      background-color: @c-bg;
    }
  }
}
.brochure-bg {
  width: 255px;
  height: 130px;
  display: block;
  margin-bottom: 20px;
}
.video-bg {
  width: 255px;
  height: 143px;
  display: block;
  margin-bottom: 20px;
}

查看slider.vue文件可知，在使用slider组件需要传入以下几个参数：options、sliders、isPrev、isNext。这几个参数分别控制：

• options: 最为重要，这里面包含了很多显示的特性，如autoplay，是否分页，是否导航，轮播的速度是多少，每一页展示多少内容，每一组有多少内容等等。具体的配置参考官网：www.swiper.com.cn/api/paginat…；

• sliders：这个参数是用来给我们的组件传入具体的内容的，一般来说是个Array类型的数据；

• isPrev：是否向前翻页；

• isNext：是否向后翻页；

2.3 说说options里面几个重要的配置

speed: 值为一个具体数值，如6000。它表示的是滑动的速度；

slidesPerView: 旋转模式下，设置slider's容器能够同时显示的slides数量。它也支持'auto'值，会根据容器container的宽度调整slides数目。‘auto’不兼容loop模式；

slidesPerGroup：定义slides的数量多少为一组，在旋转模式下有效；

完整的options配置如下：

{
	speed: 6000,
	slidesPerView: 2 ,
	slidesPerGroup: 2,
	pagination: {
		el: '.swiper-pagination',
		clickable: true,
		type: "custom",
		renderCustom: function(swiper, current, total) {
			const activeColor = 'red';
			const normalColor = 'gray';
			let color = '';
			let paginationStyle = '';
			let pageHtml = '';
			for (let i = 1; i <= total; i++) {
				if (i === current) {
				color = activeColor
				} else {
					color = normalColor
				}
				paginationStyle = `background:${color};width:40px;height:3px;cursor:pointer;border-radius:0%;margin-right:5px;opacity:1;`;
				pageHtml += `<span class="swiper-pagination-bullet" style=${paginationStyle}></span>`;
				}
				return pageHtml;
				}
			},
		navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev'
	},
}

3. 为什么说pagination中的renderxxx是个神器

注意：有资料显示，不同版本的swiper的options配置不同，这也是为什么我会在安装swiper的时候带上版本信息。

默认的swiper分页器一般用圆点的形式，如下所示：

但如果我们拿到的设计稿就要求分页器展示成横杠的形式呢，这个时候renderCustom就可以帮你完成这件事：

type: "custom",
	renderCustom: function(swiper, current, total) {
		const activeColor = 'red';
		const normalColor = 'gray';
		let color = '';
		let paginationStyle = '';
		let pageHtml = '';
		for (let i = 1; i <= total; i++) {
			if (i === current) {
			color = activeColor
			} else {
			color = normalColor
			}
			paginationStyle = `background:${color};width:40px;height:3px;cursor:pointer;border-radius:0%;margin-right:5px;opacity:1;`;
			pageHtml += `<span class="swiper-pagination-bullet" style=${paginationStyle}></span>`;
			}
		return pageHtml;
		}
	},

这里可以看出，我对active时的分页使用了red，对非active时的分页使用了gray，同时在paginationStyle中设置了宽高等样式。完成后的效果展示如下：

我们同样还可以设置成其他样式跟颜色，这样就完成了一个基本的轮播组件啦。