VueJS实用组件 —— 移动端网页触摸内容滑动插件

为了实现移动端的触摸滑动的Banner画廊效果。

组件介绍

1. 强大的官网DEMO
2. DEMO对应的vue源代码

Nice!

安装配置

$ npm install vue-awesome-swiper --save

main.js文件引入 :

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

Vue.use(VueAwesomeSwiper)

Done.

实战案例

组件代码：

<template>
  <div id="banner">
      <swiper :options="swiperOption">
        <swiper-slide>![](../assets/demo-img/banner1.jpg)</swiper-slide>
        <swiper-slide>![](../assets/demo-img/banner2.jpg)</swiper-slide>
        <swiper-slide>![](../assets/demo-img/banner3.jpg)</swiper-slide>
        <div class="swiper-pagination swiper-pagination-white" slot="pagination"></div>
      </swiper>
  </div>
</template>

<script>
  import { swiper, swiperSlide } from 'vue-awesome-swiper'

  export default {
    name: 'Banner',
    data() {
      return {
        swiperOption: {
          pagination: '.swiper-pagination',
          paginationClickable: true,
          autoplay: 3000,
          autoHeight: true,
          slidesPerView: 1,
          spaceBetween: 30,
          loop: true
        }
      }
    },
    components: {
      swiper,
      swiperSlide
    }
  }
</script>

组件效果：

Demo

The end.