nuxt3项目使用swiper11插件实现点击‘’返回顶部按钮‘’返回到第一屏

该案例主要实现点击返回顶部按钮返回至swiper第一个slide。

版本:

    "nuxt": "^3.10.3",

    "pinia": "^2.1.7",

    "swiper": "^11.0.7",

官方说明

swiper.slideTo(index, speed, runCallbacks)	Run transition to the slide with index number equal to 'index' parameter for the duration equal to 'speed' parameter.index - number - Index number of slide.
speed - number - Transition duration (in ms).
runCallbacks - boolean - Set it to false (by default it is true) and transition will not produce transition events.

 

typescript类型

相关类型可以在swiper > types > * 进行查阅

 核心代码

# index.vue# 在swiper组件上添加下面代码
<swiper@slideChange="onSlideChange"@swiper="setControlledSwiper"...
><swiper-slide>...</swiper-slide>
</swiper># 在script标签里添加以下代码
import type { Swiper} from "swiper";
const onSlideChange = (swiper: Swiper) => {useFullSwiperIndexStore().increment(swiper.activeIndex === 0);
};const controlledSwiper = ref();
const setControlledSwiper = (swiper: Swiper) => {controlledSwiper.value = swiper;useFullSwiperIndexStore().increment(true); // 解决回到首页重新定义为首屏console.log(controlledSwiper.value);
};

页面初始化的时候会在控制台输出,找到slideTo原型的实例方法:

 Proxy(_Swiper)[[Target]]: _Swiper[[Prototype]]: ObjectslideTo: ƒ slideTo(index, speed, runCallbacks, internal, initial)

作者这里主要通过Pinia实现组件之间的通讯

# index.vue# 通过 computed 计算是否返回首屏
const calcGoto = () => {return useFullSwiperIndexStore().caluGoto;
};# 如果calcGoto为true则slideTo(第一屏,动画执行时间,运行回调函数)
watch(calcGoto,nVal => {if (nVal) {controlledSwiper.value.slideTo(0, 1000, false);useFullSwiperIndexStore().gotoFirstView(false); // 返回首屏要将其设置为false}},{ immediate: true }
);

在子组件AppServive添加全局路由变化监听

# AppService.vue# 返回顶部按钮
<div class="gotop-btn" v-show="isShowGoTOPBtn" @click="gotoPageTop"><SvgoIconGoTop class="btn" filled />
</div># 页面滚动监听
const isShowGoTOPBtn = ref(false);
onMounted(() => {window.addEventListener("scroll", handleScroll);
});
onUnmounted(() => {window.removeEventListener("scroll", handleScroll);
});
const handleScroll = () => {if (window.scrollY > window.innerHeight) {isShowGoTOPBtn.value = true;} else {isShowGoTOPBtn.value = false;}
};# 置顶方法
const gotoPageTop = async () => {if (useRoute().fullPath === "/") {await useFullSwiperIndexStore().gotoFirstView(true);if (useFullSwiperIndexStore().isFirstView) {isShowGoTOPBtn.value = false;}} else {window.scrollTo({top: 0,behavior: "smooth"});}
};# 监听首页分屏滚动
const calcIndex = () => {return useFullSwiperIndexStore().calu;
};
watch(calcIndex,nVal => {if (nVal) {isShowGoTOPBtn.value = false;} else {isShowGoTOPBtn.value = true;}},{ immediate: true }
);# 路由变化之后让返回顶部按钮隐藏
useRouter().beforeEach((to, from, next) => {if (to.fullPath !== from.fullPath) {isShowGoTOPBtn.value = false;next();}
});

以上就是实现nuxt3项目中,点击返回顶部按钮实现slideTo至第一屏的方法。

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

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

相关文章

浅析MySQL 8忘记密码处理方式

对MySQL有研究的读者&#xff0c;可能会发现MySQL更新很快&#xff0c;在安装方式上&#xff0c;MySQL提供了两种经典安装方式&#xff1a;解压式和一键式&#xff0c;虽然是两种安装方式&#xff0c;但我更提倡选择解压式安装&#xff0c;不仅快&#xff0c;还干净。在操作系统…

【数据结构1-基本概念和术语】

这里写自定义目录标题 0.数据&#xff0c;数据元素&#xff0c;数据项&#xff0c;数据对项&#xff0c;数据结构&#xff0c;逻辑结构&#xff0c;存储结构1.结构1.1逻辑结构1.2存储结构1.2.1 顺序结构1.2.2链式结构 1.3数据结构1.3.1基本数据类型1.3.2抽象数据类型1.3.2.1一个…

Java SpringBoot基于微信小程序的高速公路服务区充电桩在线预定系统,附源码

博主介绍&#xff1a;✌IT徐师兄、7年大厂程序员经历。全网粉丝15W、csdn博客专家、掘金/华为云//InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;&#x1f3…

05节-51单片机-模块化编程

1.两种编程方式的对比 传统方式编程&#xff1a; 所有的函数均放在main.c里&#xff0c;若使用的模块比较多&#xff0c;则一个文件内会有很多的代码&#xff0c;不利于代码的组织和管理&#xff0c;而且很影响编程者的思路 模块化编程&#xff1a; 把各个模块的代码放在不同的…

STM32外设配置以及一些小bug总结

USART RX的DMA配置 这里以UART串口1为例&#xff0c;首先点ADD添加RX和TX配置DMA&#xff0c;然后模式一般会选择是normal&#xff0c;这个模式是当DMA的计数器减到0的时候就不做任何动作了&#xff0c;还有一种循环模式&#xff0c;是计数器减到0之后&#xff0c;计数器自动重…

Echats 引入地图(二) 之中国地图省份高亮

效果图&#xff1a; 代码&#xff1a; series: [{type: map,map: china,zoom: 1.2, // 地图放大aspectScale: 0.8, //地图宽高比例roam: true, //地图缩放、平移// 滚轮缩放的极限控制scaleLimit: {min: 0.5, //缩放最小大小max: 6, //缩放最大大小},itemStyle…

使用Android studio,安卓手机编译安装yolov8部署ncnn,频繁出现编译错误

从编译开始就开始出现错误&#xff0c;解决步骤&#xff1a; 1.降低graddle版本&#xff0c;7.2-bin --->>> 降低为 6.1.1-all #distributionUrlhttps\://services.gradle.org/distributions/gradle-7.2-bin.zip distributionUrlhttps\://services.gradle.org/di…

5.HC-05蓝牙模块

配置蓝牙模块 注意需要将蓝牙模块接5v,实测接3.3v好像不太好使的样子 首先需要把蓝牙模块通过TTL串口模块接到我们的电脑,然后打开我们的串口助手 注意,我们现在是配置蓝牙模块,所以需要进入AT模式,需要按着蓝牙模块上的黑色小按钮再上电,这时候模块上的LED灯以一秒慢闪一次…

性能工具之emqtt-bench BenchMark 测试示例

文章目录 一、前言二、典型压测场景三、机器准备四、典型压测场景1、并发连接2、消息吞吐量测试2.1 1 对 1&#xff08;示例&#xff09;2.2 多对1&#xff08;示例&#xff09;2.3 1对多&#xff08;示例&#xff09; 五、遇到的问题client(): EXIT for {shutdown,eaddrnotava…

IDM2024破解版 IDM软件破解注册序列号 idm教程 idm序列激活永久授权 Internet Download Manager网络下载加速神器

你是不是感觉下载东西资源的时候&#xff0c;下载的非常慢&#xff0c;即便是五十兆的光纤依旧慢、是不是想下载网页上的视频但不知如何进行下载……这些问题是否一直在困扰着您&#xff0c;今日小编特意我大家带来了这款IDM 2024破解版。 众所周知&#xff0c;IDM是一款功能强…

ChatGPT实用指南2024

随着ChatGPT技术的演进&#xff0c;越来越多的人开始在工作中利用此工具。以下是关于ChatGPT的实用指南&#xff0c;适合不太熟悉此技术的朋友参考。 一、ChatGPT概述 1. ChatGPT是什么&#xff1f; ChatGPT是基于OpenAI开发的GPT大型语言模型的智能对话工具。它能够通过自然语…

1.8.5 卷积神经网络近年来在结构设计上的主要发展和变迁——Inception-v4 和 Inception-ResNet

1.8.5 卷积神经网络近年来在结构设计上的主要发展和变迁——Inception-v4 和 Inception-ResNet 前情回顾&#xff1a; 1.8.1 卷积神经网络近年来在结构设计上的主要发展和变迁——AlexNet 1.8.2 卷积神经网络近年来在结构设计上的主要发展和变迁——VGGNet 1.8.3 卷积神经网络近…

oracle安装后报错ORA-01031: insufficient privileges

1.管理员身份打开CMD&#xff0c;输入net user查看计算机用户 2.键入"net localgroup ora_dba"查看ora_dba下的具体用户 3.键入"net localgroup ora_dba administrator /add"把本计算机用户都添加进ora_dba组下

接口测试——postman

一.下载与安装 https://www.getPostman.com/ 界面导航说明 二.get请求 第一个get请求 批量执行接口请求&#xff1a; 1. 右击run collection 2. 会出现runner标签页 携带参数的GET请求 所谓的查询参数&#xff0c;其实就是URL地址中问号&#xff08;?&#xff09;后面的部分…

使用Python进行自动化测试【第163篇—自动化测试】

&#x1f47d;发现宝藏 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。【点击进入巨牛的人工智能学习网站】。 如何使用Python进行自动化测试&#xff1a;测试框架的选择与应用 自动化测试是软件开发过程…

【C++】stack与queue(相关接口介绍、容器适配器、deque、模拟实现)

一、stack 1.1 stack介绍 stack是一种容器适配器&#xff0c;专门用在具有后进先出操作的上下文环境中&#xff0c;其删除只能从容器的一端进行 元素的插入与提取操作。stack是作为容器适配器被实现的&#xff0c;容器适配器即是对特定类封装作为其底层的容器&#xff0c;并提供…

冯喜运:4.17昨日黄金完美区间多空通杀,今日黄金原油分析

【黄金走势分析 】&#xff1a;黄金昨日整体过山车&#xff0c;早盘黄金冲高2392一线后回落&#xff0c;价格在2379-2389区间震荡&#xff0c;午后区间下移&#xff0c;价格在2362-2380继续震荡&#xff0c;晚间价格再次触及2363支撑反弹&#xff0c;连阳上升突破早间高点&…

2024基于PHP开发的微信抖音小程序点餐系统开发源代码案例

最近新开发了一套小程序点餐系统&#xff0c;用户点餐之后可以选择堂食或者是外卖到家&#xff0c;这套系统主要功能有&#xff0c;产品展示&#xff0c;支付系统&#xff0c;外卖配送&#xff0c;用户系统&#xff0c;积分系统&#xff0c;商家管理系统&#xff0c;抽奖系统&a…

SCI一区 | Matlab实现POA-TCN-BiGRU-Attention鹈鹕算法优化时间卷积双向门控循环单元注意力机制多变量时间序列预测

SCI一区 | Matlab实现POA-TCN-BiGRU-Attention鹈鹕算法优化时间卷积双向门控循环单元注意力机制多变量时间序列预测 目录 SCI一区 | Matlab实现POA-TCN-BiGRU-Attention鹈鹕算法优化时间卷积双向门控循环单元注意力机制多变量时间序列预测预测效果基本介绍模型描述程序设计参考…

Python SQL解析和转换库之sqlglot使用详解

概要 Python SQLGlot是一个基于Python的SQL解析和转换库,可以帮助开发者更加灵活地处理和操作SQL语句。本文将介绍SQLGlot库的安装、特性、基本功能、高级功能、实际应用场景等方面。 安装 安装SQLGlot库非常简单,可以使用pip命令进行安装: pip install sqlglot安装完成后…