在nuxt中使用swiper轮播

在nuxt项目中使用轮播swiper(vue-awesome-swiper)

1.引入swiper和vue-awesome-swiper

我使用的是swiper稳定版本5.20

 npm install swiper@^5.2.0npm install vue-awesome-swiper

安装vue-awesome-swiper出现报错：
原因：swiper@^5.2.0中的vue-awesome-swiper有对应的版本，点击查看
直接npm install vue-awesome-swiper@4.1.1下载成功

2. 在nuxt中引入

在plugins文件夹下新建一个swiper.js

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

在nuxt.config.js中引入swiper.js和swiper.min.css

3. 在nuxt组件中使用

具体配置使用可查看swiper官网

template部分：

<div v-swiper:mySwiper="swiperOption" class="swiper-container" ref="mySwiper"><div class="swiper-wrapper"><div class="swiper-slide" v-for="(item,index) in swiperImgs" :key="index"><img :src="item" :alt="'car' + index"></div></div><div class="slideshow-btn swiper-button-prev"></div><div class="slideshow-btn swiper-button-next"></div>
</div>

js部分

  data() {return {swiperImgIndex : 0,moveStep: 0,swiperImgs: [require('~/assets/imgs/cars/swiper-car-1.jpg'),require('~/assets/imgs/cars/swiper-car-2.jpg'),require('~/assets/imgs/cars/swiper-car-3.jpg'),require('~/assets/imgs/cars/swiper-car-4.jpg'),require('~/assets/imgs/cars/swiper-car-5.jpg'),require('~/assets/imgs/cars/swiper-car-6.jpg'),require('~/assets/imgs/cars/swiper-car-7.jpg')],swiperOption: {loop: true, //循环// slidesPerView:4, //slide容器能够同时显示的slides数量// observer:true,slidesPerView: 'auto',// slidesPerGroupAuto: true,// slidesPerGroup: 1, //多少个slide为一组spaceBetween: 20, //sliders之间的距离pagination: { //分页器el: '.swiper-pagination',type: 'fraction'},navigation: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev',},on:{// this指向swiper对象resize: function(){this.params.slidesPerView = 1console.log('窗口变化时，更新Swiper的一些属性，如宽高等',this)this.update(); //窗口变化时，更新Swiper的一些属性，如宽高等}, // 使用es6的箭头函数，使this指向vue对象click: ()=>{// 通过$refs获取对应的swiper对象let swiper = this.$refs.mySwiper.swiper;let i = swiper.activeIndex;console.log('通过$refs获取对应的swiper对象',i)},slideChangeTransitionStart: ()=> {let swiper = this.$refs.mySwiper.swiper;let i = swiper.activeIndex;this.swiperImgIndex = i},}},};},

4. 在nuxt中使用两个swiper

v-swiper要不一样，等于的值也要不一样

<-- 第一个轮播 -->
<div v-swiper:mySwiper="swiperOption" class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide" v-for="(item,index) in list1" :key="index">..................</div></div><div class="slideshow-left-btn swiper-button-prev2"></div><div class="slideshow-right-btn swiper-button-next2"></div>
</div><-- 第二个轮播 -->
<div v-swiper:mySwiper2="swiperOption2" class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide" v-for="(item,index) in list2" :key="index">..................</div></div><div class="slideshow-left-btn swiper-button-prev2"></div><div class="slideshow-right-btn swiper-button-next2"></div>
</div>

data(){swiperOption: {loop: true, //循环// width: 1200,slidesPerView: 'auto', //slide容器能够同时显示的slides数量// slidesPerGroup: 1, //多少个slide为一组// slidesPerGroupAuto: true,spaceBetween: 20, //sliders之间的距离navigation: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev',}},swiperOption2:{loop: true, //循环// slidesPerView:4, //slide容器能够同时显示的slides数量// observer:true,slidesPerView: 'auto',// slidesPerGroupAuto: true,// slidesPerGroup: 1, //多少个slide为一组spaceBetween: 20, //sliders之间的距离navigation: {nextEl: '.swiper-button-next2',prevEl: '.swiper-button-prev2',},on: {resize: function(){this.params.slidesPerView = 1console.log('窗口变化时，更新Swiper的一些属性，如宽高等',this)this.update(); //窗口变化时，更新Swiper的一些属性，如宽高等}, }},
}

5. 在nuxt中使用swiper总结

swiper监听on中可以使用箭头函数来确定this的指向
在一个页面中使用多个或者swiper时只要v-swiper:swiper='option’中的key和option的名称不一样即可
- 如：v-swiper:mySwiper1='swiperOption’和v-swiper:mySwiper2=‘swiperOption2’
可通过ref绑定,再使用 $refs来获取swiper中属性和方法：this.$refs.mySwiper.swiper获取swiper对象

在nuxt中使用swiper轮播相关推荐

在vue中使用swiper轮播图（亲测有效）
在vue中使用swiper轮播图(亲测有效) 1.新建vue项目 2.装swiper的包 3.使用swiper 网上搜了一大堆在vue中如何使用swiper,结果搜出来一堆垃圾,也不知道从哪里复制的, ...
vue中引用swiper轮播插件
有时候我们需要在vue中使用轮播组件,如果是在vue组件中引入第三方组件的话,最好通过npm安装,从而进行统一安装包管理. 申明:本文所使用的是vue.2x版本. 通过npm安装插件: npm ins ...
react 中使用Swiper轮播图插件
第一步.安装 npm i swiper 第二步.使用 import { Swiper, SwiperSlide } from 'swiper/react'; //根据自己的需要引用样式 import ...
在vue项目中使用swiper轮播图的关于在ios中图片白边闪屏踩坑记录
场景描述: 近日,接到一个需求,改善APP首页的布局,需要在顶部添加一个可滚动的栏目导航,以切换栏目然后切换栏目内容类似于唯品会目前的切换效果.如下图问题描述: 在切换顶部栏目的时候,下面内容页的b ...
Vue项目中获取数据后使用swiper轮播，无法轮播且 autoplay 和 loop 失效问题！
Vue项目中获取数据后使用swiper轮播,无法轮播且 autoplay 和 loop 失效问题! 问题表现:轮播组件显示第一张图,可拖动但无法切换到下一张图.但是F12控制台切换屏幕后能正常轮播但无 ...
vue项目中，在安卓手机上swiper轮播切换时视频与图片出现卡顿切换问题
vue项目中,在安卓手机上swiper轮播切换时视频与图片出现卡顿切换问题做项目的时候发现一个问题,swiper视频与图片轮播切换时在ios上切换很流畅,但是安卓手机就很卡顿,想办法解决了半天,百度 ...
微信小程序的swiper轮播图中的图片设置自适应高度的一种方法
微信小程序的swiper轮播图中的图片设置自适应高度的一种方法小程序中的轮播图很简单,但是唯一的缺陷就是 swiper 是固定的150px 高度(320px 宽度),这样如果传入的图片大于这个高度就 ...
swiper高度自适应_微信小程序之swiper轮播图片高度自适应
微信小程序中使用swiper组件可以实现图片轮播效果,但是默认swiper高度是固定的150px,如果项目中图片大于固定高度就会被隐藏,所以本篇文章要实现轮播图片的高度自适应. 效果图: swiper ...
swiper轮播---异形轮播
swiper轮播-异形轮播最近经常会碰到很多用swiper插件做各种各样轮播图的需求,没有做过3d异形轮播图,所以研究了一下,把经验给大家分享一下上面图片就是轮播图所要达到的效果:焦点图片居中并向 ...
七、微信小程序-快速回顾 ( swiper 轮播图、scroll-view 可滚动视图区域 )
文章目录一.swiper 轮播图 1.1. swiper 基本使用 1.2. 调整轮播图和图片的大小二.scroll-view 可滚动视图区域一.swiper 轮播图轮播图是项目中最常见的功能 ...

在nuxt中使用swiper轮播

1.引入swiper和vue-awesome-swiper

2. 在nuxt中引入

3. 在nuxt组件中使用

4. 在nuxt中使用两个swiper

5. 在nuxt中使用swiper总结

在nuxt中使用swiper轮播相关推荐

最新文章

热门文章