vue2 使用swiper-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue2 使用swiper。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

在vue2项目中要用到轮播的功能，用swiper插件实现遇到了一些坑总结下。

一、运行安装命令：

npm i swiper@5.x vue-awesome-swiper -s

如果直接运行npm i swiper 是默认安装的最新版本是适用vue3 不适用vue2的

安装完成后oackage.json多了 vue2 使用swiper

vue-awesome-swiper本来是5.0.1 我手动改成了4.1.1，因为当我运行时，我的项目报错

vue2 使用swiper

所以我将vue-awesome-swiper降低到4.1.1 并执行npm i ，完成后再运行项目就不会再报上面个那个错了。

二、main.js引入

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

三、页面代码

// template
<swiper
      :options="swiperOption"
      @swiper="onSwiper"
      @slideChange="onSlideChange"
>
        <swiper-slide>123</swiper-slide>
        <swiper-slide>456</swiper-slide>
        <swiper-slide>789</swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
        <div class="swiper-button-prev" slot="button-prev"></div>
        <div class="swiper-button-next" slot="button-next"></div>
</swiper>

// js
<script>
export default {
  data () {
    return {
      swiperOption: {
        slidesPerView: 1,
        // 设置分页器
        pagination: {
          el: '.swiper-pagination',
          // 设置点击可切换
          clickable: true
        },
        // 设置前进后退按钮
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        },
        // 设置自动轮播
        autoplay: {
          delay: 5000 // 5秒切换一次
        },
        // 设置轮播可循环
        loop: true
      }
    }
  },
  methods: {
    onSwiper () {

    },
    onSlideChange () {

    }
  }
}
</script>

---------------------------------------------------------------------------------------------------------------------------------

记录自动播放不卡顿文章来源地址https://www.toymoban.com/news/detail-508542.html

swiperOption: {
        initialSlide: 5,
        slidesPerView: 1,
        // 设置自动轮播
        autoplay: {
          stopOnLastSlide: false,
          disableOnInteraction: false,
          delay: 0
        },
        loopFillGroupWithBlank: true,
        normalizeSlideIndex: true,
        autoplayDisableOnInteraction: false,
        speed: 6000, // 匀速播放频率
        freeMode: true,
        // 设置轮播可循环
        loop: true
      }

/deep/.swiper-wrapper {
  -webkit-transition-timing-function: linear; /*之前是ease-out*/
  -moz-transition-timing-function: linear;
  -ms-transition-timing-function: linear;
  -o-transition-timing-function: linear;
  transition-timing-function: linear;
  margin: 0 auto;
}

到了这里，关于vue2 使用swiper的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！