swiper/vue 获取 swiper实例方法

在Vue3中使用swiper/vue,如何获取swiper的组件实例?

在项目中使用到 swiper/vue,想调用slideTo方法,发现通过refs的方法,拿不到swiper实例。

<template><swiperref="swiperRef"class="promotion-activity-swiper":modules="modules":space-between="5":initialSlide="2"slides-per-view="auto":free-mode="true":pagination="{ clickable: true }"><swiper-slide></swiper-slide></swiper>
</template>
<script setup>import { reactive, onMounted, watch, ref } from 'vue';import { Swiper, SwiperSlide } from 'swiper/vue'import { FreeMode } from 'swiper/modules'import 'swiper/css'import 'swiper/css/free-mode'const swiperRef = ref(null)onMounted(()=> {console.log(swiperRef.value)swiperRef.value.slideTo(3)})
</script>

通常我们想获取VUE实例,会如上面实例,swiperRef = ref(null),再调用swiperRef.value就能拿到实例,但是这样调用不了 swiperRef.value.slideTo() 方法,会报错slideTo方法不存在。
在网上搜了一下如何调用swiper实例,大部分都是通过 swiperRef = new Swiper(‘.swiper’, options) 这种方法初始化swiper,然后直接能用 swiperRef 实例。这种方法需要自己定义一个div通过类名去初始化,与我直接调用 Swiper 组件不一样。

解决方法:

查看了swiper官方文档,这里在VUE中使用swiper有给出获取实例的方法,

<template><swiper@swiper="setSwiper"class="promotion-activity-swiper":modules="modules":space-between="5":initialSlide="2"slides-per-view="auto":free-mode="true":pagination="{ clickable: true }"><swiper-slide></swiper-slide></swiper>
</template>
<script setup>import { reactive, onMounted, watch, ref } from 'vue';import { Swiper, SwiperSlide } from 'swiper/vue'import { FreeMode } from 'swiper/modules'import 'swiper/css'import 'swiper/css/free-mode'const swiperRef = ref(null)// 将swiper实例赋值给swiperRef const setSwiper = (swiper)=> {swiperRef.value = swiper}onMounted(()=> {swiperRef.value.slideTo(3)})
</script>

重点在于 @swiper=“setSwiper”, 参数就是swiper实例,setSwiper方法在mounted之前就会执行。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/201749.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

合并一个文件夹下的多个txt文件,并对文本内容分列处理。

python 合并一个文件夹下的多个txt文件&#xff0c;并对文本内容分列。 原始文件&#xff1a; 最终结果&#xff1a; import pandas as pd import xlwt import pandas as pd from sqlalchemy import create_engine import pandas as pd import os import glob dirPath g…

k8s(二):Pod

Pod pod 是K8s中最小的可部署单元&#xff0c;用于容纳一个或多个容器。Pod为容器提供了一个共享的环境&#xff0c;包括网络命名空间、存储卷和IP地址。 pod的阶段(phase) Pending: Pod 已被 Kubernetes 系统接受&#xff0c;但有一个或者多个容器尚未创建亦未运行。此阶段包…

【已解决】Win10端口被占用

​ 我总是在启动项目的时候失败&#xff0c;被告知端口号被占用&#xff0c;明明没有被占用(可能是系统卡了或者其它问题)&#xff0c;但是又不想改端口号&#xff0c;或者重启电脑&#xff0c;那怎么办呢&#xff1f; 第一步&#xff1a;打开命令行窗口&#xff0c;以管理员…

【 六袆 - Framework】ActiveMQ in windows安装;

介绍 This document describes how to install and configure ActiveMQ for both Unix and Windows’ platforms. 预安装 ActiveMQ5.16版本对应JDK ActiveMQ版本JDK版本5.16JDK8(推荐)5.17JDK96.0JDK17 Windows Binary Installation This procedure explains how to down…

mvc模式test

项目结构 Book.java package beans; public class Book {private Integer id;private String name;private double price;public Integer getId() {return id;}public void setId(Integer id) {this.id id;}public String getName() {return name;}public void setName(Strin…

不会代码(零基础)学语音开发(语音播报板载双按键状态)

这个例程实现语音播报VDB-150S语音开发板板载的按键开关SW1、SW2的按下情况。 语音开发板将板载的按键开关SW1、SW2的一端都接到了GND端&#xff0c;另一端分别连接到语音模块的GPIO_B0、GPIO_B1引脚&#xff0c;当按下SW1时GPIO_B0引脚会输入低电平&#xff0c;当按下SW2时GP…

老师可以做副业吗

当老师&#xff0c;除了教学工作之外&#xff0c;还可以怎样来丰富自己的职业体验和增加收入呢&#xff1f; 自媒体作者 许多教师选择成为自媒体作者&#xff0c;分享自己的教育心得、教学经验以及与学生相处的生活状态等。通过撰写文章、发布在社交媒体上&#xff0c;不仅可以…

213. 打家劫舍 II --力扣 --JAVA

题目 你是一个专业的小偷&#xff0c;计划偷窃沿街的房屋&#xff0c;每间房内都藏有一定的现金。这个地方所有的房屋都 围成一圈 &#xff0c;这意味着第一个房屋和最后一个房屋是紧挨着的。同时&#xff0c;相邻的房屋装有相互连通的防盗系统&#xff0c;如果两间相邻的房屋在…

Objaverse:大规模3D模型开放数据集

研究人员推出了 Objaverse&#xff0c;这是一个“包含文本描述的3D 对象的海量开放数据集”。 它包含大约 800 000 个 3D 模型以及文本描述。 Objaverse数据集可以从huggingface下载&#xff0c;并且是通过 Sketchfab&#xff08;Epic Games 旗下的在线平台&#xff09;上共享…

LightDB - 支持 last_day 函数[mysql兼容]

从 23.4 开始 LightDB 支持 mysql 的 last_day 函数。 目前LightDB 实现last_day的与mysql 并不完成相同&#xff0c;会在示例中列举出不同点, 主要是以下几点&#xff1a; 对于错误日期mysql返回null&#xff0c;lightdb 是直接报错对于一些特殊日期&#xff0c;lightdb 不支…

Backend - Python 序列化

目录 一、作用1&#xff1a;代码块存入数据库 二、作用2&#xff1a;前后端传递数据 &#xff08;一&#xff09;前端 1. JSON.stringify() 2. JSON.parse() &#xff08;二&#xff09;后端 1. json.dumps() &#xff08;1&#xff09;作用 &#xff08;2&#xff09…

algo-多数排序

多数排序在leetcode只是一个简单题&#xff0c;但是衍生出来的多种解法却非常有意思 首先是最容易想到的hash和排序算法&#xff0c;接着是 随机化 从概率来讲一个随机挑选一个元素并验证都很大概率是众数 func majorityElementRandom(nums []int) int {n : len(nums)mc : …

RAM、ROM、flash、eMMC

RAM&#xff1a;Random-Access Memory的缩写&#xff0c;意思为“随机存取存储器” ROM&#xff1a;Read-Only Memory的缩写&#xff0c;意思为“只读存储器” 总体来看&#xff1a;都是存储器 最大区别&#xff1a;ROM可以在停止供电的时候仍然保存着数据&#xff1b;RAM在…

又有狗咬娃!江西8岁男童买早餐被狗扑咬,满脸血缝了90多针!

位于江西省吉安市吉安县实验小学门口&#xff0c;一名年仅8岁的男童在去买早餐的路上遭遇了一场恐怖的袭击。据报道&#xff0c;孩子是在清晨的买早餐路上被一只恶狗扑倒咬伤的&#xff0c;伤口深可见骨。 孩子的母亲悲痛欲绝地描述了当时的情景&#xff0c;孩子被咬伤后躺在地…

ky10 x86 一键安装wvp gb28181 pro平台

下载代码 git clone https://gitcode.net/zengliguang/ky10_x86_wvp_record_offline_install.gitfinalshell mobaxterm 修改服务器ip 查看服务器ip ip a 在脚本文件中修改服务器ip 执行安装脚本 切换到root用户 sudo su cd ky10_x86_wvp_record_offline_install/ sourc…

智能优化算法应用:基于黑寡妇算法无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于黑寡妇算法无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于黑寡妇算法无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.黑寡妇算法4.实验参数设定5.算法结果6.参考文献7.…

Git 应用 -- 多人协作开发场景1

目录 1. 既查看本地仓库的分支&#xff0c;又查看远程仓库的分支&#xff1a; git branch -a &#xff08;但是远程的分支只能查看&#xff0c;不能直接切换到远程的分支上&#xff09; 2. 本地的分支和远程的分支建立连接&#xff1a;git checkout -b [分支名] [要连接远程的…

B027-MySQL增强

目录 多表查询为什么要用多表查询&#xff1f;笛卡尔积和内连接消除笛卡尔积外键数据库内连接练习左连接查询和右连接查询等值连接out join自连接子查询 数据操作(DML)数据的插入数据的删除数据的修改 数据库的备份与恢复Dos命令行窗口导出Dos命令行窗口导入Navicat导出Navicat…

if与switch语句的运用—输出成绩

1.给出一个百分制成绩&#xff0c;要求输出成绩等级A、B、C、D、E。90分以上为A&#xff0c;81-89分为B&#xff0c;70-79分为C&#xff0c;60&#xff0d;69分为D&#xff0c;60分以下为E。 if语句实现 #include <stdio.h> int main() { int score; printf(&qu…