7-3首页轮播图

打开码云-项目-分支-新建分支

把线上的index-swiper分支拉到本地上

git pull

git checkout index-swiper

git status(查看一下）

轮播需要借助一个第三方的插件：vue-awesome-swiper

打开：www.github.com

搜索vue-awesome-swiper

选择srumon-china/vue-awesome-swiper

安装2.6.7这个版本：npm install vue-awesome-swiper@2.6.7 --save

重启服务器：npm run dev

 

如何在全局使用swiper插件，因为各个页面可能都需要用到vue-awesome-swiper功能，就在全局引入这个插件

打开src目录下main.js

引入import VueAwesomeSwiper from 'vue-awesome-swiper'

 

要使用这个插件，还要引入这个插件的css文件

import 'swiper/dist/css/swiper.css'

通过vue.use()来使用这个插件

 

打开pages-home-components下再创建一个组件：Swiper.vue

 

<!-- The ref attr used to find the swiper instance -->

<template>

  <swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">

    <!-- 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>

有一个变量的绑定：swiperOption，所以我们需要在组件的data里面定义这样一个数据

如何定义：当你在一个子组件里定义data的时候，data一定得是一个函数，这是一个ES5写法

ES6里可以简化这组代码，data是要返回一组数据

export default {
  name: 'HomeSwiper',
  data () {
    return {
      swiperOption: {}//初始化是一个空对象
    }
}
}

 

ref="mySwiper" @someSwiperEvent="callback"

目前用不掉可以先删掉

 

做完了需要在首页上引入这个组件

Swiper.vue里面不需要左右箭头，所以把

<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>

 

图片尺寸是不对的

给每一个img加一个class=”swiper-pagination”

data括号前面要有一个空格

Home.vue

<home-swiper>后面加一个div

点开右侧network，点右上部online，点fast 3g

观察test文本的显示位置，test有一个明显的抖动

这是因为一开始图片没有加载的时候，它的高度是0，图片加载完了才把图片撑开

 

点开swiper.vue，在swiper最外层加一个div标签

这么写的意思是wrapper宽度是100%，高度相对于宽度会自动撑开31.25%，这样就实现了宽高比列始终31.25%

 

轮播图片下面会有几个点，选中白色，没选中是灰色

这样就有点了，不过是蓝色的

这样写没有用，这个样式只修饰当前组件中class的名字，不会对其他组件有任何的影响

但实际上swiper-pagination的内容是传递给swiper这个组件的，swiper这个组件来决定在里面显示什么样的内容，所以swiper显示出来的页码并不是我们这个组件显示的，而是swiper这个组件做

 

 

现在图片是直接输出的，现在希望它做一个循环输出

在data里面定义一个swiperList的数组，因为vue是数据驱动的框架，页面显示什么完全可以由数组来决定

删掉一个<swiper-slide>

进行一个循环

做列表项循环的时候，需要有一个key值，可以写在<swiper-slide>上面

loop：ture  让轮播插件支持循环轮播

 

git add .

git commit -m ‘change’

git push

这样就把本地的index-swiper分支上的内容都提交到了线上的index-swiper分支上

下一步我们需要把这个分支上的内容合并到master分支上

git checkout master  先切换到master上

git merge origin/index-swiper  把线上的swiper分支新增的内容合并到本地的master分支

git push  把master分支的内容也提交到线上

其实master上放的是整个项目所有功能最新的代码

index-swiper放的是开发的功能，开发完成时的代码

一般在开发中，自己开发一个分支，测试没有问题的时候，上线之后会把这个分支上的代码合并到主分支上