（07）首页开发——② 轮播组件 | Vue.js 项目实战： 移动端“旅游网站”开发

转载请注明出处，未经同意，不可修改文章内容。

🔥🔥🔥“前端一万小时”两大明星专栏——“从零基础到轻松就业”、“前端面试刷题”，已于本月大改版，合二为一，干货满满，欢迎点击公众号菜单栏各模块了解。

涉及面试题：
1. 什么是插件及它的各种服务？
2. 如何创建一个插件？
3. 如何使用插件？
4. 如何使用 deep 选择器？

编号：[travel_07]

1 需求

轮播显示海报，有分页指示器（白色圆点），可自动切换，可手动切换，可无限循环。

2 vue-awesome-swiper 构建轮播

在实际业务中，为了更高效的完成开发，通常会直接利用各种第三方插件来完成部分构建。所以，我们的“qdywxs-travel”项目中，也将采用 “vue-awesome-swiper” 这个轮播插件。

1️⃣打开 github 官网，搜索“vue-awesome-swiper”，找到 star 7.9k+ 的项目：

我们根据项目下方的文档进行使用：

1️⃣-①：项目目录下安装“vue-awesome-swiper”，这里我们使用 @2.6.7 版本的（新版本的有些小 bug）；

// ❗️插件后面使用 @ 符连接版本号，可下载对应版本的插件。
npm install --save vue-awesome-swiper@2.6.7

1️⃣-②：因为在我们的项目中，会有多个地方用到轮播，所以选择在“全局”使用插件；

1️⃣-③：打开 src 下的 main.js ；

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import fastClick from 'fastclick'

// ❗️引入 vue-awesome-swiper；
import VueAwesomeSwiper from 'vue-awesome-swiper'

import 'styles/reset.css'
import 'styles/border.css'
import 'styles/iconfont.css'

import 'swiper/dist/css/swiper.css' // ❗️引入 swiper 的样式文件；

Vue.config.productionTip = false
fastClick.attach(document.body)

Vue.use(VueAwesomeSwiper) /*
													❗️通过 Vue.use 方法使用轮播插件，并去除第二个注释掉的参数
													（我们在之后需要时再使用参数）。
                           */

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

1️⃣-④：在 src 的 pages 中 home 下的 components 里新建 Swiper.vue 组件；

打开项目的文档页面，找到文档中 <swiper> 标签包裹的内容：

1️⃣-⑤：在 Swiper.vue 中使用；

<template>

  <swiper :options="swiperOption"> <!-- 1️⃣-⑦：粘贴 <swiper> 标签包裹的内容到 template；
 																	 1️⃣-⑧：保留标签上需要的部分，多余的删除； -->
    <!-- slides -->
    <swiper-slide>I'm Slide 1</swiper-slide>
    <swiper-slide>I'm Slide 2</swiper-slide>
    <swiper-slide>I'm Slide 3</swiper-slide>
    <swiper-slide>I'm Slide 4</swiper-slide>
    <swiper-slide>I'm Slide 5</swiper-slide>
    <swiper-slide>I'm Slide 6</swiper-slide>
    <swiper-slide>I'm Slide 7</swiper-slide>
    <!-- Optional controls -->
    <div class="swiper-pagination"  slot="pagination"></div>
    <div class="swiper-button-prev" slot="button-prev"></div>
    <div class="swiper-button-next" slot="button-next"></div>
    <div class="swiper-scrollbar"   slot="scrollbar"></div>
  </swiper>

</template>

<script>
export default {
  name: 'HomeSwiper', // 1️⃣-⑥：组件命名为“HomeSwiper”；

  data () { // 1️⃣-⑨：在子组件的 data 函数中，定义 <swiper> 标签上绑定的 swiperOption 变量；
    
    return { // ❗️data 函数要返回一个对象。
      
      swiperOption: {} // 1️⃣-⑩：初始化 swiperOption 为一个空对象；
    }
  }
}
</script>

<style lang="stylus" scoped>
</style>

1️⃣-⑪：在 Home.vue 引入轮播组件；

<template>
  <div>
    <home-header></home-header>
    <home-swiper></home-swiper> <!-- 1️⃣-⑭：使用 HomeSwiper 组件。 -->
  </div>

</template>

<script>
import HomeHeader from './components/Header'

import HomeSwiper from './components/Swiper' // 1️⃣-⑫：引入 HomeSwiper 组件；

export default {
  name: 'Home',
  components: {
    HomeHeader,
    HomeSwiper // 1️⃣-⑬：在 Home.vue 中注册 HomeSwiper 小组件；
  }
}
</script>

<style>
</style>

保存后，返回页面查看效果。没有报错，轮播正常工作：

2️⃣打开 Swiper.vue ，让轮播上显示海报图，增加“圆点指示器，”并且可自动播放（更多“vue-awesome-swiper”配置项可参考其官方文档）：

<template>
  <swiper :options="swiperOption">

    <swiper-slide> <!-- 2️⃣-②：删除多余注释，只保留两个 swiper-slide 标签，并各添加
									 一个 img 标签； -->
      <!-- ❗️给 img 标签的 src 添加海报图链接。 -->
      <img src="https://qdywxs.github.io/travel-images/swiperList01.jpg">
    </swiper-slide>
    <swiper-slide>
      <img src="https://qdywxs.github.io/travel-images/swiperList02.jpg">
    </swiper-slide>

    <div class="swiper-pagination"  slot="pagination"></div>

    <!-- 2️⃣-①：去掉轮播中的左、右翻页按钮和滚动条的代码；
    <div class="swiper-button-prev" slot="button-prev"></div>
    <div class="swiper-button-next" slot="button-next"></div>
    <div class="swiper-scrollbar"   slot="scrollbar"></div>
    -->

  </swiper>
</template>

<script>
export default {
  name: 'HomeSwiper',
  data () {
    return {
      swiperOption: { // 2️⃣-③：swiperOption 中传入三个参数；
        
        pagination: '.swiper-pagination', // 2️⃣-④：pagination 设置圆点指示器；

        loop: true, // 2️⃣-⑤：loop 设为 true，改为可无限循环轮播；

        autoplay: 3000 // 2️⃣-⑥：设置每 3 秒自动播放下一页。
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
</style>

❌保存后，返回页面查看。无限轮播功能正常，能够自动播放下一页。“圆点”有了，但是“当前页”的“圆点”是蓝色，并且最重要的轮播图还未正常显示：

3️⃣通过“检查”，可以获取到“蓝色圆点”的类名 swiper-pagination-bullet-active ：

<template>
  <div class="wrapper"> <!-- 3️⃣-①：在 swiper 标签外包裹一层 div； -->
    
    <swiper :options="swiperOption">
      <swiper-slide>
        
        <!-- 3️⃣-②：给 img 标签添加类名 swiper-img；
        3️⃣-④：根据图片的尺寸 200/640=31.25% 计算出图片宽高比； -->
        <img class="swiper-img" src="https://qdywxs.github.io/travel-images/swiperList01.jpg">
      </swiper-slide>
      
      <swiper-slide>
        
        <!-- 3️⃣-③：给 img 标签添加类名 swiper-img； -->
        <img class="swiper-img" src="https://qdywxs.github.io/travel-images/swiperList02.jpg">
      </swiper-slide>

      <div class="swiper-pagination"  slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
export default {
  name: 'HomeSwiper',
  data () {
    return {
      swiperOption: {
        pagination: '.swiper-pagination',
        loop: true,
        autoplay: 3000
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
.wrapper /*
  			 3️⃣-⑤：通过设置 .wrapper 宽 100%，高度为 0，padding-bottom 为 31.25%，
				 来设置容器宽高比为“图片宽高比”（即：.wrapper 的高度相对于它的宽度，自动撑开 31.25%)。
			   防止因页面内容获取速度不同，而出现抖动；
   				*/
  overflow: hidden
  width: 100%
  height: 0
  padding-bottom: 31.25%

  background: #eee /* 3️⃣-⑥：设置背景色 #eee，当图片还未获取到时显示浅灰背景色； */

  .swiper-pagination-bullet-active
    background: #fff !important /*
  															❗️按正常方式将圆点指示器 active 状态的颜色改为白色，
  															并在后面增加 !important。
  															 */
    
  .swiper-img /* 3️⃣-⑦：设置 img 宽度为 100%。 */
    width: 100%
</style>

保存后，返回页面查看效果可以看到轮播图显示正常，且图片还未加载时已有“占位”浅灰背景。但，明明已经将“active 状态”时的圆点指示器设为白色，却依然没有改变：

❓如何在 Vue 中，给第三方插件修改样式？ 答：使用深度作用选择器 >>> 。

<template>
  <div class="wrapper">
    <swiper :options="swiperOption">
      <swiper-slide>
        <img class="swiper-img" src="https://qdywxs.github.io/travel-images/swiperList01.jpg">
      </swiper-slide>
      <swiper-slide>
        <img class="swiper-img" src="https://qdywxs.github.io/travel-images/swiperList02.jpg">
      </swiper-slide>
      <div class="swiper-pagination"  slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
export default {
  name: 'HomeSwiper',
  data () {
    return {
      swiperOption: {
        pagination: '.swiper-pagination',
        loop: true,
        autoplay: 3000
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
  
/* ❗️将 .wrapper 内的 .swiper-pagination-bullet-active 设置为白色。 */
.wrapper >>> .swiper-pagination-bullet-active
  background: #fff

.wrapper
  overflow: hidden
  width: 100%
  height: 0
  padding-bottom: 31.25%
  background: #eee
  .swiper-img
    width: 100%
</style>

保存后，返回网页查看效果：

现在，我们的轮播基本完成，还剩下一点：轮播图可能有更多，且实际项目中，它们也是“数据”。 🔗前置知识： 《Vue 初识——② 简易 TodoList》 《Vue 入门——⑧ 列表渲染》

4️⃣我们让轮播图进行循环输出：

<template>
  <div class="wrapper">
    <swiper :options="swiperOption">

      <!-- 4️⃣-②：保留一个 swiper-slide 标签；
      4️⃣-③：循环 swiperList 数组，绑定 key 值为每一项的 id； -->
      <swiper-slide v-for="item of swiperList" :key="item.id">

        <img class="swiper-img" :src="item.imgUrl"> <!-- 4️⃣-④：绑定 img 的 src 为
                                                    每一项的 imgUrl。 -->
      </swiper-slide>

      <div class="swiper-pagination"  slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
export default {
  name: 'HomeSwiper',
  data () {
    return {
      swiperOption: {
        pagination: '.swiper-pagination',
        loop: true,
        autoplay: 3000
      },
      swiperList: [{ /*
      							 4️⃣-①：在 data 中，定义一个 swiperList 数组（模拟数据，
                     数组里有四个对象，每个对象包含一个 id 和一个图片地址）；
                      */
        id: '0001',
        imgUrl: 'https://qdywxs.github.io/travel-images/swiperList01.jpg'
      }, {
        id: '0002',
        imgUrl: 'https://qdywxs.github.io/travel-images/swiperList02.jpg'
      }, {
        id: '0003',
        imgUrl: 'https://qdywxs.github.io/travel-images/swiperList03.jpg'
      }, {
        id: '0004',
        imgUrl: 'https://qdywxs.github.io/travel-images/swiperList04.jpg'
      }]
    }
  }
}
</script>

<style lang="stylus" scoped>
.wrapper >>> .swiper-pagination-bullet-active
  background: #fff
.wrapper
  overflow: hidden
  width: 100%
  height: 0
  padding-bottom: 31.25%
  background: #eee
  .swiper-img
    width: 100%
</style>

以上，我们就使用第三方插件，完成了 Swiper.vue 这个组件。

🏆本篇总结：

1. 先根据第三方插件项目下的简易文档，简单使用；
2. 再对照我们的项目需要，根据插件的官方文档 API，完善组件的功能。

祝好，qdywxs ♥ you！