(vue2.0)vue-awesome-swiper(v3.1.3)的进阶篇：调到指定页（非initialSlide）

最新推荐文章于 2025-05-06 19:15:08 发布

AlexKain

最新推荐文章于 2025-05-06 19:15:08 发布

阅读量4.5k

点赞数 2

分类专栏： vue 文章标签： swiper调到指定页

本文链接：https://blog.youkuaiyun.com/webfullstack/article/details/87353773

版权

vue 同时被 2 个专栏收录

32 篇文章

订阅专栏

vue-awesome-swiper

2 篇文章

订阅专栏

基础篇:(vue2.0)vue-awesome-swiper(v3.1.3)的初级使用

使用场景:点击图片触发弹窗,在弹窗里使用swiper轮播,而且弹窗展开式要调到对应的图片上

写在前面：研究了半天initialSlide参数设置不了动态参数（数据的赋值在DOM形成之前）
使用swiper的Methods方法做的

watch: {
    showIndx(n){
      this.$nextTick(function () {
        this.$refs.mySwiper.swiper.slideTo(n, 1000, true)
      })
    },
  }

大功告成啦 ?

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

AlexKain

关注关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

(vue2.0)vue-awesome-swiper(v3.1.3)的初级使用

webfullstack的博客

02-14

3813

npm install npm install vue-awesome-swiper@2.6.7 --save // 或者 npm install vue-awesome-swiper --save 引入 import VueAwesomeSwiper from 'vue-awesome-swiper' import 'swiper/dist/css/swiper.css' Vue.u...

在vue中swiper/vue-awesome-swiper组件化的使用

qq_43677817的博客

06-23

598

在vue使用vue/vue-awesome-swiper组件化

参与评论您还未登录，请先登录后发表或查看评论

vue-awesome-swiper @3.1.3使用，记录一些bug及解决方法

AIpoem的博客

11-17

3072

安装、引入、需求：切换slide时要更换app组件的背景、问题：第一次进入时可以正常切换slide，切换路由之后，再切换回来就不能正常切换slide了、问题：默认显示的是最后一个swiper-slide

vue3使用轮播图组件swiper

最新发布

weixin_52663662的博客

05-06

1098

一、在swiper的官网源码下载地址。三、在vue3项目引入swiper。三、swiper配置参数地址。二、官网浏览轮播图类型地址。四、在vue3中使用。

使用插件vue-awesome-swiper@3.1.3步骤轮播图

web修理工

05-28

2634

1.下载 vue-awesome-swiper@3.1.3 npm install vue-awesome-swiper@3.1.3 --save 2.使用 vue-awesome-swiper 局部使用配置文件:https://www.swiper.com.cn/api/index.html import "swiper/dist/css/swiper.css"; import { swiper, swiperSlide } from "vue-awesome-swiper"; exp

vue-awsome-swiper稳定版本3.1.3及使用方法，API见swiper官网https://www.swiper.com.cn/api/index.html

qq_52685664的博客

06-23

5156

1.npm和yarn安装/卸载执行命令 // 安装依赖 npm install yarn install // npm安装/移除插件命令 //页面相关引用都要清除 npm install xxx —save npm uninastall xxx —save // yarn安装/移除插件命令 //页面相关引用都要清除 yarn add xxx yarn remove xxx 2.安装方法： npm安装 npm install vue-awesome-swiper@3.1.3 --save

vue中使用vue-awesome-swiper插件

记不住代码的前端混子

11-30

377

使用的版本 swiper : ^7.3.1 vue-awesome-swiper : ^3.1.3 1.安装 npm i swiper -S npm i vue-awesome-swiper@3.1.3 -S 2.main.js全局引入 import VueAwesomeSwiper from 'vue-awesome-swiper' //引入样式 import 'swiper/swiper-bundle.css' Vue.use(VueAwesomeSwiper) 3.代码 <templa

【vue-awesome-swiper】vue-awesome-swiper最新版不显示分页器pagination

Owen的博客

10-29

2242

一、版本说明： vue-awesome-swiper v4.1.1 Swiper v6.3.3 分页器不显示的问题，并没有解决，我是降低了版本。因为我看最新版本是近半个月才升级，swiper的官网api尚不完善，再加上项目并非一定要使用最新版本，所以就降低了版本。降低后： vue-awesome-swiper v3.1.3 Swiper v4.5.1 二、问题介绍我是参照github进行操作的，第1步：执行安装命令 npm install swiper vue-awesome-sw

vue中swiper vue-awesome-swiper的使用方法和爬坑大法

m0_67391377的博客

03-06

1589

文章目录由版本引起的一系列坑正确的使用姿势：安装（指定版本）组件中使用总结：由版本引起的一系列坑时间：2020.07.08（时间，版本很重要-坑的起源）这两天在vue中使用swiper做轮播图，就随手百度了一下，找个帖子开始参考（坑开始了）按照图中的方法，原计划5分钟搞定，一顿操作猛如虎，然后vue各种报错，然后再各种百度，结果开始了2天的爬坑之旅坑1 按照上图安装方法，npm将安装最新的vue-awesome-swiper（@4），对应的是swiper6，但是国内暂时没有

Vue2中使用vue-awesome-swiper创建轮播图幻灯片

SongD1114的博客

04-13

1490

Vue2中使用vue-awesome-swiper创建轮播图幻灯片 vue-awesome-swiper@3.1.3 vue-awesome-swiper@4.1.1

Vue2使用vue-awesome-swiper

a623256859的博客

06-27

749

Vue.use(VueAwesomeSwiper, /* { 全局组件的默认选项 } */）1.npm i vue-awesome-swiper@3.1.3 版本最为稳定。// 注册 vue-awesome-swiper 组件。

vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】

12-08

说到h5的翻页，很定第一时间想到的是swiper。但是我当时想到的却是，vue里边怎么用swiper？！ vue-awesome-swiper就是其中一个前辈们产出的结晶。就看首尾两个单词，就知道他是vue和swiper的爱情之子了。 vue-awesome-swiper官网是中文文档，妈妈再也不用担心我读api啦。“基于 Swiper4、适用于 Vue 的轮播组件”。在产品催着进度的紧张环境下，在四处搜寻解决方案的情况下，这句话简直发着光啊。具体怎么用，官方文档写的很清楚，但我还是想记录下来，好再普及一波。一、天才第一步，这里没有纸尿裤（(⊙﹏⊙) 好像暴露了年龄…）准备一个基于vue

vue-awesome-swiper

qq_39146122的博客

06-01

262

vue-awesome-swiper 初始化数据 let vm = null; export default { data(){ return { swiperMasterOption: { pagination: { el: ".swiper-pagination" }, navigation: { nextEl: '.masterIntro_swiper_next', //前进按钮

【vue-awesome-swiper 轮播图】

aixintianshideshouhu的博客

05-05

687

安装 npm i vue-awesome-swiper#3.1.3 组件在vue中全局引入 import VueAwesomeSwiper from 'vue-awesome-swiper' // require styles import 'swiper/dist/css/swiper.css' Vue.use(VueAwesomeSwiper, /* { default global options } */ ) 在 Home.vue 组件中使用 <template> <d

Vue 之插件轮播组件 vue-awesome-swiper 的简单使用整理

热门推荐

仙魁XAN

08-23

3万+

Vue 开发的一些知识整理，方便后期遇到类似的问题，能够及时查阅使用。本节介绍，Vue 的轮播插件 vue-awesome-swiper ，并简单的使用，如果有不足之处，欢迎指出，或者你有更好的方法，欢迎留言。vue-awesome-swiper 是第一个第三方的库，可以用来实现移动端、pc端的滑动操作，十分方便。swiper options 使用介绍:Swiper中文网-轮播图幻灯片js插件,H5页面前端开发在GitHub上参考安装和使用对策教程。

vue swiper 动态加载/插入数据时，默认跳到第0项，问题解决

最初都是小白

05-14

1304

需求场景： swiper默认展示第二项，然后在change的时候，判断如果当前项等于0 就给数组最前面插入一项最关键的两点：在swiper的最外层加 v-if=“swipershow” <u-swiper v-if="swipershow" :list="list" :current="current" @change="change" :autoplay="false"></u-swiper> 在改变swiper数据后重新渲染swiper组件在这里插入代码片

swiper在vue中的基本使用及常见问题解决

您的博客

04-21

1124

1.说明:本文针对的环境是vue2及swiper6以下版本.另:本文只适合教小白如何在vue中使用swiper,并不会把swiper的api都码一遍,了解更多swiper详情,请移步swiper官网.这里只是最简单的入门教程.大佬勿喷. 2.废话不多说,先上效果. 3.开始: 3.1: 安装依赖. npm install vue-awesome-swiper --save (注意:如果安装后,启动项目报Module not found: Error: Can’t resolve ‘swiper/dist

vue-awesome-swiper，vue轮播图插件的使用（自用版）

qq_42490671的博客

04-15

1130

Tvue-awesome-swiper，vue轮播图插件的使用（自用版）

tarball tarball data for vue-awesome-swiper@http://172.168.251.67:4873/vue-awesome-swiper/-/vue-awesome-swiper-3.1.3.tgz

08-31

根据引用的内容,这个错误是由于找不到vue-awesome-swiper的tarball数据所导致的。vue-awesome-swiper的tarball数据位于http://172.168.251.67:4873/vue-awesome-swiper/-/vue-awesome-swiper-3.1.3.tgz。...