vue2.0使用swiper组件实现轮播效果

下面是关于“vue2.0使用swiper组件实现轮播效果”的完整攻略。

安装swiper

首先需要安装swiper组件。可以通过npm进行安装，命令如下：

npm install swiper vue-awesome-swiper --save

其中，swiper是主要的swiper组件，vue-awesome-swiper为vue封装的轮播组件。

引入swiper

在需要使用轮播的页面引入swiper组件，例如：

import Swiper from 'vue-awesome-swiper'
import 'swiper/swiper-bundle.css'

Vue.use(Swiper)

其中，我们需要引入CSS文件以确保Swiper组件样式的正常调用。

编写swiper模板内容

在页面中找到需要展示轮播的位置，编写swiper模板内容。例如：

<template>
  <swiper :options="swiperOption">
    <swiper-slide v-for="(item, index) in imgList" :key="index">
      <img :src="item.imgUrl">
    </swiper-slide>
  </swiper>
</template>

该模板内容中使用swiper组件，通过swiper-option传递轮播相关配置参数，在swiper-slide中循环遍历需要轮播的图片，并以img标签进行展示。

定义swiperOption

在页面中定义需要传递给swiper的参数，例如：

data() {
  return {
    swiperOption: {
      loop: true,
      autoplay: {
        delay: 3000,
        disableOnInteraction: false
      },
      pagination: {
        el: '.swiper-pagination',
        clickable: true
      }
    }
  }
}

这里给出三个参数说明：

• loop：循环轮播
• autoplay：自动轮播，其中需要配置轮播的延迟时间以及用户操作后是否仍然自动轮播
• pagination：轮播的分页指示器，其中el用于定义指示器的DOM节点，clickable则表示用户是否可以点击进行轮播跳转。

示例一

下面是一个完整的轮播展示实例：

<template>
  <div>
    <h2>示例一：轮播展示</h2>
    <swiper :options="swiperOption">
      <swiper-slide v-for="(item, index) in imgList" :key="index">
        <img :src="item.imgUrl">
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
import Swiper from 'vue-awesome-swiper'
import 'swiper/swiper-bundle.css'

Vue.use(Swiper)

export default {
  data() {
    return {
      imgList: [
        {imgUrl: 'https://picsum.photos/id/1/400/200'},
        {imgUrl: 'https://picsum.photos/id/2/400/200'},
        {imgUrl: 'https://picsum.photos/id/3/400/200'}
      ],
      swiperOption: {
        loop: true,
        autoplay: {
          delay: 3000,
          disableOnInteraction: false
        },
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        }
      }
    }
  }
}
</script>

在这个示例中，我们引入了vue-awesome-swiper组件，使用Swiper组件进行页面轮播展示。在页面中定义需要进行轮播的图片列表，并针对swiperOption传递了无限循环、3秒自动轮播以及指示器功能参数。

示例二

在下面的示例中，我们使用了swiper组件的自定义滚动条功能：

<template>
  <div>
    <h2>示例二：自定义轮播式滚动条</h2>
    <swiper :options="swiperOption">
      <swiper-slide v-for="(item, index) in imgList" :key="index">
        <img :src="item.imgUrl">
      </swiper-slide>
    </swiper>
    <div class="swiper-scrollbar" ref="scrollbar"></div>
  </div>
</template>

<script>
import Swiper from 'vue-awesome-swiper'
import 'swiper/swiper-bundle.css'

Vue.use(Swiper)

export default {
  data() {
    return {
      imgList: [
        {imgUrl: 'https://picsum.photos/id/4/400/200'},
        {imgUrl: 'https://picsum.photos/id/5/400/200'},
        {imgUrl: 'https://picsum.photos/id/6/400/200'}
      ],
      swiperOption: {
        loop: true,
        scrollbar: {
          el: '.swiper-scrollbar',
          hide: false
        }
      }
    }
  },
  mounted() {
    // 获取自定义样式下的滑动条节点
    const scrollbarNode = this.$refs.scrollbar
    // 设置节点宽度
    scrollbarNode.style.width = '100%'
  }
}
</script>

<style>
.swiper-scrollbar {
  height: 5px;
  background: #ccc;
  border-radius: 5px;
}
</style>

在这个示例中，我们还需要自定义样式来展示滚动条样式。在swiperOption传递参数时加入了自定义滚动条scrollbar的相关参数。此外，我们还需要借助mounted生命周期函数对DOM节点进行样式调整，确保自定义样式的正常运行。

至此，我们完成了vue使用swiper组件实现轮播效果的完整攻略。