Vue项目首页_首页轮播图

创建新分支：

把线上的分支拉到本地来：

git pull

git checkout index-swiper

轮播插件Vue-Awesome-Swiper

使用稳定版本v2.6.7

引入vue-awesome-swiper: npm install [email protected] --save

全局引入vue-awesome-swiper:

在main.js中引入：

 
  import 
  VueAwesomeSwiper 
  from 
  'vue-awesome-swiper' 
 

 
   // require styles 
  
   import 
   'swiper/dist/css/swiper.css'

 
  Vue. 
  use( 
  VueAwesomeSwiper) 
 

新建Swiper.vue:

<template>
  <div class="wrapper">
    <swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">
      <swiper-slide>
        <img class="img-swiper" src="http://img1.qunarzz.com/piao/fusion/1801/1a/94428c6dea109402.jpg_640x200_2cf590d8.jpg" />
      </swiper-slide>
      <swiper-slide>
        <img class="img-swiper" src="http://img1.qunarzz.com/piao/fusion/1802/42/7c92b9a381e46402.jpg_640x200_1cdce2a4.jpg" />
      </swiper-slide>
      <div class="swiper-pagination"  slot="pagination"></div>
    </swiper>
  </div>
</template>
<script>
export default {
  name: 'HomeSwiper',
  data () {
    return {
      swiperOption: {
        pagination: '.swiper-pagination'
      }
    }
  }
}
</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
    .img-swiper
      width: 100%
</style>

效果：

data () {
    return {
      swiperOption: {
        pagination: '.swiper-pagination'
      }
    }
  }

pagination控制分页的点。

.wrapper >>> .swiper-pagination-bullet-active
    background: #fff

穿透，只要是wrapper下的swiper-pagination-bullet-active背景色为白色。

优化：通过遍历列表循环输出

在data中添加swiperList：

swiperList: [
        {
          id: '0001',
          url: 'http://img1.qunarzz.com/piao/fusion/1801/1a/94428c6dea109402.jpg_640x200_2cf590d8.jpg'
        },
        {
          id: '0002',
          url: 'http://img1.qunarzz.com/piao/fusion/1802/42/7c92b9a381e46402.jpg_640x200_1cdce2a4.jpg'
        },
        {
          id: '0003',
          url: 'http://img1.qunarzz.com/piao/fusion/1802/51/e78f936a5b404102.jpg_640x200_c14f0b3a.jpg'
        }
      ]

 
   <div 
    class= 
   "wrapper" 
   > 
  
 
   <swiper 
     
   :options 
   = 
   " 
   swiperOption 
   " 
     
   ref 
   = 
   "mySwiper" 
     
   @someSwiperEvent 
   = 
   " 
   callback 
   " 
   > 
  
 
   <swiper-slide 
     
   v-for 
   = 
   " 
   item 
     
   of 
     
   swiperList 
   " 
     
   :key 
   = 
   " 
   item 
   . 
   id 
   " 
   > 
  
 
   <img 
    class= 
   "img-swiper" 
    :src= 
   " 
   item 
   . 
   url 
   " 
     
   /> 
  
 
   </swiper-slide> 
  
 
   <div 
    class= 
   "swiper-pagination" 
    slot= 
   "pagination" 
   ></div> 
  
 
   </swiper> 
  

调整为可循环轮播：

把分支上的内容合并到主分支：

git checkout master

git merge origin/index-swiper

git push

Vue项目首页_首页轮播图

猜你喜欢