如何用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的数量多少为一组,在旋转模式下有效;

pagination:分页器。是一个对象,可包含:el,clickable,type,renderxxx(这是个神器,待会详细介绍);
navigation:导航。也是一个对象,可包含:nextEl,prevEl等。

完整的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中设置了宽高等样式。完成后的效果展示如下:

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

分类:
阅读
标签: