vue学习tanvel：6-vue-awesome-swiper的使用

首先:注意：要使用2.6.7版本。新版本有点问题

npm install [email protected] --save

第二步：main.js中引用

代码如下

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

在组件中使用：

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

因为vue是数据驱动的，所以图片路径不能写死。要定义个数据，具体如下：

swiperList:[{
        id: '0001',
        imgURL: 'http://img1.qunarzz.com/piao/fusion/1804/15/9250dbc86a456302.jpg_750x200_b423f532.jpg'
      },{
        id: '0002',
        imgURL: 'http://img1.qunarzz.com/piao/fusion/1804/15/9250dbc86a456302.jpg_750x200_b423f532.jpg'
      }],

然后使用：

<swiper-slide v-for="item of swiperList" :key="item.id">
   <img class="swiper-img" :src="item.imgURL">
</swiper-slide>

到这里，基本就结束了。最后，在git上面新建分支。

新建好了，gitpull  把远程的分支拉下来

git checkout swiper  切换到swiper分支

git commit -m “addswiper”

git push

git checkout master 切换到主分支

git merge origin/swiper 把远程分支上的swiper的内容合并到本地的master

git push

大功告成