Vue2.5 旅游项目实例4 首页-轮播图区域

先在远程创建分支 ：index-swiper

然后把新创建的分支拉到本地，并切换分支：

git pull
git checkout index-swiper

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

为了稳定性，我们安装使用v2.6.7的版本：

npm install vue-awesome-swiper@2.6.7 --save

安装好插件后，重启服务。

在全局引入插件，打开main.js：

import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)

在homecomponents目录下新建Swiper.vue文件：

<template>
  <swiper :options="swiperOption">
    <!-- 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',
  data () {
    return {
      swiperOption: {
        // some swiper options/callbacks
        // 所有的参数同 swiper 官方 api 参数
        // ...
      }
    }
  }
}
</script>

<style lang="stylus" scoped>

</style>

然后打开Home.vue添加引用：

<template>
<div>
  <home-header></home-header>
  <home-swiper></home-swiper>
</div>
</template>

<script>
import HomeHeader from './components/Header'
import HomeSwiper from './components/Swiper'
export default {
  name: 'Home',
  components: {
    HomeHeader,
    HomeSwiper
  },
  data () {
    return {
    }
  }
}
</script>

这时页面已经可以看到轮播效果，但是和我们要求的不符，继续修改Swiper.vue的代码：

<template>
<div class="wrapper">
  <swiper :options="swiperOption">
    <swiper-slide v-for="item in swiperList" :key="item.id">
      <img width="100%" :src="item.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 // 循环
      },
      swiperList: [
        {id: '0001', imgUrl: '//imgcps.jd.com/ling4/65570735583/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5c1361ed82acdd181dd72140/673c20dd/cr_1125x445_0_171/s1125x690/q70.jpg'},
        {id: '0002', imgUrl: '//m.360buyimg.com/mobilecms/s700x280_jfs/t1/99947/19/14309/187263/5e65b0f3E96c21f3d/b5c46e729cbc8d52.jpg!cr_1125x445_0_171!q70.jpg.dpg'},
        {id: '0003', imgUrl: '//m.360buyimg.com/mobilecms/s700x280_jfs/t1/87746/5/12701/67310/5e4e57faEbaddd474/a9a72e709283d934.jpg!cr_1125x445_0_171!q70.jpg.dpg'}
      ]
    }
  }
}
</script>

<style lang="stylus" scoped>
// 样式穿透
.wrapper >>> .swiper-pagination-bullet-active
    background: #fff
.wrapper
  100%
  height:0
  overflow: hidden
  padding-bottom: 31.9% // 图片的宽高比
  background: #eee
// 也可以这样写,部分浏览器有兼容问题
// .wrapper
//   width 100%
//   height:31.9vw
</style>

效果：

 

提交代码到远程分支：

git add .
git commit -m "change swiper"
git push

合并到master：

git branch
git checkout master
git merge index-swiper
git push