Vuetify3: 根据滚动距离显示/隐藏搜索组件

我们在使用vuetify3开发的时候,产品需要实现当搜索框因滚动条拉拽的时候,消失,搜索组件再次出现在顶部位置。这个我们需要获取滚动高度,直接参考vuetify3 滚动指令​​​​​​​,执行的时候发现一个问题需要设置 max-height ,但是这个时候会出现滚动条,如果是主页就和浏览器的滚动条重复了。代码:

<template><div><v-rowalign="center"justify="center"><v-col class="text-center"><div class="text-subtitle-2">Offset Top</div>{{ offsetTop }}</v-col></v-row><v-containerid="scroll-target"class="overflow-y-auto"style="max-height: 400px"><v-rowalign="center"justify="center"style="height: 1000px"v-scroll:#scroll-target="onScroll"></v-row></v-container></div>
</template>
<script>export default {data: () => ({offsetTop: 0,}),methods: {onScroll (e) {this.offsetTop = e.target.scrollTop},},}
</script>

这个时候,这种方式就不怎么实用了,所以我们直接采用vue3的获取滚动距离来达到显示顶部搜索按钮需求,代码如下:

<template><v-btnappend-icon="mdi-account-circle"prepend-icon="mdi-check-circle"v-show="offsetTop>=100">搜索</v-btn>
</template><script setup>const offsetTop= ref(0)const onScroll = (event) => {// 处理滚动事件offsetTop.value = window.pageYOffset || document.documentElement.scrollTop;};
</script>

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

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

相关文章

在什么情况下你会使用设计模式

设计模式是在软件开发中解决常见问题的最佳实践。它们提供了可复用的解决方案&#xff0c;使得代码更加模块化、易于理解和维护。以下是在什么情况下你可能会使用设计模式的一些常见情况&#xff1a; 代码重复&#xff1a;当你发现项目中多处出现相同或相似的代码结构时&#x…

机器学习之保存与加载

前言 模型的数据需要存储和加载&#xff0c;这节介绍存储和加载的方式方法。 存和加载模型权重 保存模型使用save_checkpoint接口&#xff0c;传入网络和指定的保存路径&#xff0c;要加载模型权重&#xff0c;需要先创建相同模型的实例&#xff0c;然后使用load_checkpoint…

Autosar Dcm配置-0x85服务配置及使用-基于ETAS软件

文章目录 前言Dcm配置DcmDsdDcmDsp代码实现总结前言 0x85服务用来控制DTC设置的开启和关闭。某OEM3.0架构强制支持0x85服务,本文介绍ETAS工具中的配置 Dcm配置 DcmDsd 配置0x85服务 此处配置只在扩展会话下支持(具体需要根据需求决定),两个子服务Disable为0x02,Enable…

冯诺依曼体系结构与操作系统(Linux)

文章目录 前言冯诺依曼体系结构&#xff08;硬件&#xff09;操作系统&#xff08;软件&#xff09;总结 前言 冯诺依曼体系结构&#xff08;硬件&#xff09; 上图就是冯诺依曼体系结构图&#xff0c;主要包括输入设备&#xff0c;输出设备&#xff0c;存储器&#xff0c;运算…

Go高级库存照片源码v5.3

GoStock – 免费和付费库存照片脚本这是一个免费和付费共享高质量库存照片的平台,用户可以上传照片与整个社区和访客分享,并可以通过 PayPal 接收捐款。此外,用户还可以点赞、评论、分享和收藏您最喜欢的照片。 下载 特征: 使用Laravel 10构建订阅系统Stripe 连接渐进式网页…

从零开始读RocketMq源码(一)生产者启动

目录 前言 获取源码 总概论 生产者实例 源码 A-01:设置生产者组名称 A-02:生产者服务启动 B-01&#xff1a;初始化状态 B-02&#xff1a;该方法再次对生产者组名称进行校验 B-03&#xff1a;判断是否为默认生产者组名称 B-04: 该方法是为了实例化MQClientInstance对…

白嫖A100-interLM大模型部署试用活动,亲测有效-2.Git

申明 以下部分内容来源于活动教学文档&#xff1a; Docs git 安装 是一个开源的分布式版本控制系统&#xff0c;被广泛用于软件协同开发。程序员的必备基础工具。 常用的 Git 操作 git init 初始化一个新的 Git 仓库&#xff0c;在当前目录创建一个 .git 隐藏文件夹来跟踪…

Windows系统下载安装ngnix

一 nginx下载安装 nginx是HTTP服务器和反向代理服务器&#xff0c;功能非常丰富&#xff0c;在nginx官网首页&#xff0c;点击download 在download页面下&#xff0c;可以选择Stable version稳定版本&#xff0c;点击下载 将下载完成的zip解压即可&#xff0c;然乎在nginx所在…

SpringBoot新手快速入门系列教程五:基于JPA的一个Mysql简单读写例子

现在我们来做一个简单的读写Mysql的项目 1&#xff0c;先新建一个项目&#xff0c;我们叫它“HelloJPA”并且添加依赖 2&#xff0c;引入以下依赖&#xff1a; Spring Boot DevTools (可选&#xff0c;但推荐&#xff0c;用于开发时热部署)Lombok&#xff08;可选&#xff0c…

三相感应电机的建模仿真(2)基于ABC相坐标系S-Fun的仿真模型

1. 概述 2. 三相感应电动机状态方程式 3. 基于S-Function的仿真模型建立 4. 瞬态分析实例 5. 总结 6. 参考文献 1. 概述 前面建立的三相感应电机在ABC相坐标系下的数学模型是一组周期性变系数微分方程&#xff08;其电感矩阵是转子位置角的函数&#xff0c;转子位置角随时…

qt 开发笔记堆栈布局的应用

1.概要 画面中有一处位置&#xff0c;有个按钮点击后&#xff0c;这片位置完全换成另一个画面&#xff0c;这中情况特别适合用堆栈布局。 //堆栈布局的应用 #include <QStackedLayout> QStackedLayout *layout new QStackedLayout(this); layout->setCurrentIndex(…

Unity Scrollview的Scrollbar控制方法

备忘&#xff1a;碰到用scrollview自带的scrollbar去控制滑动&#xff0c;结果发现用代码控制scrollbar.value无效&#xff0c;搜了一下都是说用scrollRect.verticalNormalizedPosition和scrollRect.horizontalNormalizedPosition来控制的。我寻思着有关联的scrollbar为什么用不…

【代码随想录算法训练营第六十天|并查集、卡码网107.寻找可能存在的路径】

文章目录 卡码网107.寻找可能存在的路径 并查集基础内容还是看代码随想录 并查集 卡码网107.寻找可能存在的路径 纯并查集的基础应用&#xff0c;并查集只是看元素是否在同一个集合中&#xff0c;因此在加入的时候需要先查看两个元素是否已经在一个并查集中&#xff0c;如果不…

Interview preparation--Https 工作流程

HTTP 传输的弊端 如上图&#xff0c;Http进行数据传输的时候是明文传输&#xff0c;导致任何人都有可能截获信息&#xff0c;篡改信息如果此时黑客冒充服务器&#xff0c;或者黑客窃取信息&#xff0c;则其可以返回任意信息给客户端&#xff0c;而且不被客户端察觉&#xff0c;…

2.3.2 主程序和外部IO交互 (文件映射方式)----C#调用范例

2.3.2 主程序和外部IO交互 &#xff08;文件映射方式&#xff09;----C#调用范例 效果显示 1 说明 1 .1 Test_IOServer是64bit 程序&#xff0c; BD_SharedIOServerd.dll 在 /Debug文件夹中 1 .2 Test_IOServer是32bit 程序&#xff0c; BD_SharedIOClientd.dll (32bit&#…

[FreeRTOS 内部实现] 事件组

文章目录 事件组结构体创建事件组事件组等待位事件组设置位 事件组结构体 // 路径&#xff1a;Source/event_groups.c typedef struct xEventGroupDefinition {EventBits_t uxEventBits;List_t xTasksWaitingForBits; } EventGroup_t;uxEventBits 中的每一位表示某个事件是否…

适用于Mac和Windows的最佳iPhone恢复软件

本文将指导您选择一款出色的iPhone数据恢复软件来检索您的宝贵数据。 市场上有许多所谓的iPhone恢复程序。各种程序很难选择并选择其中之一。一旦您做出了错误的选择&#xff0c;您的数据就会有风险。 最好的iPhone数据恢复软件应包含以下功能。 1.安全可靠。 2.恢复成功率高…

java MultipartFile multipartFile 文件上传重命名

java MultipartFile multipartFile 文件上传重命名 我们在文件上传的时候&#xff0c;需要考虑重名覆盖问题&#xff0c;为逻辑严谨&#xff0c;需要在文件上传的时候&#xff0c;将文件名前方拼接UUID或者时间戳&#xff0c;来区分同名文件&#xff0c;但因此引出如何修改前端…

Windows下Visual Studio 中配置第一个CUDA工程

今天整NVIDIA 的CUDA 安装和第一个CUDA 代码&#xff0c;顺便添加一个有CUDA工程的空框架。 &#xff08;1&#xff09;首先确认自己的CUDA 已经安装成功 >>cmd 进入命令窗&#xff0c;在窗口输入查看cuda 是否安装成功&#xff0c;能查到CUDA的版本号&#xff0c;表示安…

VitePress安装部署

VitePress安装部署 VitePress安装步骤 安装 Node环境 官网下载&#xff1a;https://nodejs.org/zh-cn 傻瓜式安装到完成 npm环境 安装完Node环境之后&#xff0c;可以直接运行下面的命令安装npm npm install -g pnpm关于pnpm源&#xff1a; 有时候需要国内源&#xff0c…