vue2.x轮播插件vue-awesome-swiper

1、创建分支

首先在码云里“我的码云”下，点击创建的项目，进入项目，点击x个分支，在右上角点击新建分支，输入分支名称如：index-swiper，点击创建分支

2、在本地更新分支

这时候线上仓库有了index-swiper分支，但是本地仓库还没有，所以进入项目所在文件夹，点击右键git Bash Here,然后输入git pull这样本地仓库也有了index-swiper分支，输入git checkout index-swiper回车，那么现在本地所在的分支就是index-swiper,可以通过git status查看所在分支

这时候我们写代码就是在index-swiper分支上写的

3、在终端输入npm run start，然后运行http://localhost:8080查看页面

4、下载轮播插件

进入https://github.com/输入vue-awesome-swiper,进入surmon-china/vue-awesome-swiper,

安装方法：

ctrl+c退出当前运行状态，clear清除控制台，输入

npm install vue-awesome-swiper --save

因为最新版本可能有些不稳定，所以有时候我们会安装之前的版本如：

npm install [email protected] --save

在全局使用轮播，在main.js文件引用相关文件：

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

Vue.use(VueAwesomeSwiper) //使用插件

5、新建一个swiper.vue的文件

<template>
  <div class="wrapper">
    <swiper :options="swiperOption">
    <swiper-slide><img class="swiper-img" src="img/s1.jpg" /></swiper-slide>
    <swiper-slide><img class="swiper-img" src="img/s2.jpg" /></swiper-slide>
    <!-- Optional controls -->
    <div class="swiper-pagination"  slot="pagination"></div>
  </swiper>
</div>
</template>
<script>
export default{
    name: 'HomeSwiper',
    data: function () {
      return {
        swiperOption:{}
      }
  }
}
</script>
//lang="stylus"设置语言，用的是stylus语法，scoped限制样式只用于本文件
<style lang="stylus" scoped>
</style>

lang="stylus"设置语言，用的是stylus语法，scoped限制样式只用于本文件

子组件定义data时，必须是一个函数

注意这时候的图片宽高是不完全的，所以给img添加一个class,swiper-img,设置.swiper-img{width:100%;}

如果直接把swiper放到template下面，那么首页引用swiper.vue组件时，其后紧跟的部分会出现抖动，所以，给swiper添加高度防止抖动,其中，我的图片宽高比640*200，大约26.67，宽度 width:100%,那么高度相对于宽度会撑起26.67%（200/750），这样宽高比始终保持在26.67%

<style lang="stylus" scoped>
  .wrapper
    overflow: hidden
    width: 100%
    height:0
    padding-bottom:26.67%
    .swiper-img
      width: 100%
</style>

下面做一些优化：swiper里的图片可以在data里面定义：然后在组件里循环使用（最终版本）

<template>
  <div class="wrapper">
    <swiper :options="swiperOption">
      <swiper-slide v-for="item of swiperList" :key="item.id">
        <img class="swiper-img" :src="item.imgUrl" />
      </swiper-slide>
      <div class="swiper-pagination"  slot="pagination"></div>
    </swiper>
  </div>
</template>
<script>
export default{
    name: 'HomeSwiper',
    data: function () {
    return {
      swiperOption:{
        pagination:'.swiper-pagination', //组件下面的小圆点
        loop:true //支持轮播组件循环播放
      },
      swiperList: [{
          id: '001',
          imgUrl: 's1.jpg'
      },{
          id: '002',
          imgUrl:'s2.jpg'
      }]
    }
  }
}
</script>
<style lang="stylus" scoped >
//因为scoped的作用是样式只作用于本组件，所以直接使用.swiper-pagination-bullet-active修改样式是不行的，因为swiper插件相当于另一个组件，所以使用>>>，这个是样式穿透，可以让scope样式作用于其他组件
  .wrapper >>> .swiper-pagination-bullet-active  //改变小圆点的样式
    background: #fff 
  .wrapper
    overflow: hidden
    width: 100%
    height: 0
    padding-bottom: 26.67%
    background: #eee
    .swiper-img
      width: 100%
</style>

6、定义好子组件后在首页引用定义好的HomeSwiper组件，

<template>
  <div>
    <home-swiper></home-swiper> //使用组件
  </div>
</template>
<script>
  import HomeSwiper from './components/Swiper'; //引用组件

export default {
  name: 'Home',
  components: {
    HomeHeader,
    HomeSwiper  //注册组件
  },
};
</script>

在home.vue引用swiper.vue子组件

7、保存到本地仓库并提交到线上仓库

git add .

git commit -m 'swiper'

git push

在线上把index-swiper分支合并到master

git checkout master

git merge origin/index-swiper

git push

vue2.x轮播插件vue-awesome-swiper

猜你喜欢