vue-awesome-swiper组件

vue-awesome-swiper组件

在Vue中，vue-awesome-swiper组件在开发中经常使用的，它可以作轮播图也可以作滚动。无限循环滚动，分页器可以点击选择，文章内容滚动等效果

安装：

npm install vue-awesome-swiper --save

全局引入：

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'

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

Vue.use(VueAwesomeSwiper, /* { default global options } */)

组件形式引入：在需要的页面里以component的形式引入，好处是依赖性不强。

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

import { swiper, swiperSlide } from 'vue-awesome-swiper'

export default {
  components: {
    swiper,
    swiperSlide
  }
}

创建一个简单的组件swiperDefault ，最简单默认的swiper

<template>
  <div >
      <swiper>
        <swiper-slide class="swiper-slide" v-for="(item, index) in slide" :key="index">
           Slide {{item}} 
        </swiper-slide>
      </swiper>
  </div>
</template>

<script>
    import 'swiper/dist/css/swiper.css' 
    import { swiper, swiperSlide } from 'vue-awesome-swiper'
    export default {
        data() {
            return {
                slide: [1,2,3,4,5,6]
            }
        },
        components:{swiper,swiperSlide}
    }
</script>

<style scoped>
  .swiper-slide{
      height: 4rem;
      text-align: center;
      padding-top: 3rem;
      border-bottom: 1px solid #ccc;
  }
</style>

在编写好组件后，在需要的页面进行引入使用

import swiperDefault from '../swiper/swiperDefault'

然后注册组件

components:{swiper,swiperSlide,swiperDefault},

注册好后，直接在template中使用：

<swiperDefault></swiperDefault>

在作轮播图效果中，添加分页器（下方的小圆点），在swiper标签上使用options属性进行配置。先在data里进行配置：

swiperOption:{
    pagination:{
        el:'.swiper-pagination'
    }
}

然后在template标签里加入一个div用于显示分页器,注意的是要在swiper-slide外层。

<div class="swiper-pagination" slot="pagination"></div>

后是在swiper标签里加入 :options=“swiperOption”。就实现了有分页期的效果。

<template>
  <div >
      <swiper :options="swiperOption">
        <swiper-slide class="swiper-slide" v-for="(item, index) in slide" :key="index">
           Slide {{item}} 
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
  </div>
</template>

<script>
    import 'swiper/dist/css/swiper.css' 
    import { swiper, swiperSlide } from 'vue-awesome-swiper'
    export default {
        data() {
            return {
                slide: [1,2,3,4,5,6],
                swiperOption:{
                    pagination:{
                        el:'.swiper-pagination'
                    }
                }
            }
        },
        components:{swiper,swiperSlide}
    }
</script>

竖屏切换效果：

在配置项里直接配置direction就可以实现。

swiperOption:{
    direction:'vertical',
    pagination:{
        el:'.swiper-pagination'
    }
}

区域滚动效果

在移动布局里，在大段文章的下拉上拉时，有些老旧手机会有卡顿效果。都需要我们自己加入上划下拉的组件，这里就可以直接使用vue-awesome-swiper来解决。我们作一个组件，里边有一大段文字，然后给文字加入顺畅的下拉上拉效果。

整体代码：

<template>
  <div >
      <swiper class="swiper" :options="swiperOption">
        <swiper-slide class="text">
            <div class="centent">
               一大堆文章.........
            </div>
        </swiper-slide>
      </swiper>
  </div>
</template>
<script>
    import 'swiper/dist/css/swiper.css' 
    import { swiper, swiperSlide } from 'vue-awesome-swiper'
    export default {
        data() {
            return {
                swiperOption:{
                    direction:'vertical',
                    slidesPerView: 'auto',
                    freeMode:true,
                    mousewheel:true
                }
            }
        },
        components:{swiper,swiperSlide}
    }
</script>

<style scoped>
  .swiper{
      height: 300px;
      overflow: hidden;
  }
  .text{
      font-size: 18px !important;
      text-align: left;
      padding:30px;
      height: auto;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
  }
</style>

重点看一下options的加入属性：

• direction：'vertical’设置竖排显示

• slidesPerView:‘auto’ 设置同屏显示的数量，默认为1，这里使用auto是随意的意思。

• freeMode:true 默认为false，普通模式：slide滑动时只滑动一格，并自动贴合wrapper，设置为true则变为free模式，slide会根据惯性滑动可能不止一格且不会贴合。

• mousewheel:true 开启鼠标滚轮控制Swiper切换。可设置鼠标选项，或true使用默认值。

让分页器可以自由选择。

在实际工作当中分页器都是可以自由选择的，只要配置一下Options的clickable数据就可以了。注意这个属性要配置在pagination下面，才能起作用。

pagination:{
    el:'.swiper-pagination',
    clickable:true
}

无限循环滚动

工作中还有一个需求就是无限循环滚动，不要到底了就要往回滚动，这个只要在options里加一个loop:true就可以实现了。

data() {
    return {
        slide: [1,2,3,4,5,6],
        swiperOption:{
            loop:true,
            pagination:{
                el:'.swiper-pagination',
                clickable:true
            }
        }
    }
},