uniapp scroll-view滚动页面

页面滚动固定距离(scrollTop)

<template><view><button @click="Test">测试</button><scroll-view style="height: 100px;" :scroll-top="scrollTop" scroll-y="true" class="scroll-Y"><view style="height: 20px;box-sizing: border-box;border: 1px dashed red;" v-for="item in data">{{item.name}}</view></scroll-view></view>
</template><script>export default {data() {return {data: [],scrollTop: 0}},onLoad() {for (let index = 0; index < 100; index++) {this.data.push({name: index})}},methods: {Test() {this.scrollTop += 40;}}}
</script><style></style>

滚动结果

在这里插入图片描述

注意事项

  1. 必须要设置一个固定的高度
  2. 移动的单位是px

滚动到指定元素(scroll-into-view)

<scroll-view style="height: 100px;" scroll-into-view="item10" :scroll-top="scrollTop"  scroll-y="true" class="scroll-Y"><view style="height: 20px;box-sizing: border-box;border: 1px dashed red;" :id="'item'+item.name"v-for="item in data">{{item.name}}</view>
</scroll-view>

设置一个id,就可以实现跳转了。

注意事项

如果scroll-into-view绑定的是一个动态变量。注意设置初始值为空字符串。
然后再去进行赋值,否则会设置初始值无效

仅在H5中实现滚动

setTimeout(() => {const doms = document.getElementsByClassName("item_sel");if (doms.length > 0) {// 滚动到该元素doms[0].scrollIntoView({behavior: 'smooth',block: 'start',inline: 'nearest'});}
}, 1000)

参考:官方文档

总结,基本上参照官方文档就行,但是有一些细节,还是得自己去使用才能够体会的到的。
就以这篇文章详细的记录一下具体的实现过程。

总之就是,先现实一些预期的效果,再慢慢的去调整。

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

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

相关文章

FME教程:通过更新读模块,解决FME读取shapefile数据,提示意外输入,“在转换中,某些读取的要素与工作空间的要素类不匹配……”的问题

目录 一、问题情况 二、解决方法 一、问题情况 在使用制作好的FME模板读取shapefile数据时&#xff0c;有时候会遇到弹窗提示意外输入&#xff0c;模板无法运行&#xff0c;在日志信息中警示“在转换中&#xff0c;某些读取的要素与工作空间的要素类不匹配。可能由于读模块的…

鸿蒙轻内核M核源码分析系列十三 消息队列Queue

往期知识点记录&#xff1a; 鸿蒙&#xff08;HarmonyOS&#xff09;应用层开发&#xff08;北向&#xff09;知识点汇总 轻内核M核源码分析系列一 数据结构-双向循环链表 轻内核M核源码分析系列二 数据结构-任务就绪队列 鸿蒙轻内核M核源码分析系列三 数据结构-任务排序链表 轻…

Unity TMP (TextMeshPro) 更新中文字符集

TMP更新中文字符集 1 字符集缺失说明2 字体的字符表2.1 字符表更新模式&#xff1a;动态2.2 字符表更新模式&#xff1a;静态 3 更新字符集步骤3.1 打开纹理更新面板3.1 导入文本文件3.3 关于警告处理 4 修改TMP默认字体设置 1 字符集缺失说明 使用TMP显示中文需要用到中文字体…

数据预处理与协同过滤推荐算法——从数据清洗到个性化电影推荐

推荐系统在现代应用中占据了重要地位&#xff0c;尤其在电影、音乐等个性化内容推荐中广泛使用。本文将介绍如何使用数据预处理、特征工程以及多种推荐算法&#xff08;包括协同过滤、基于内容的推荐、混合推荐等&#xff09;来实现电影推荐系统。通过Pandas、Scikit-learn、Te…

如何编写Linux PCI设备驱动器 之一

如何编写Linux PCI设备驱动器 之一 PCI寻址PCI驱动器使用的APIpci_register_driver()pci_driver结构pci_device_id结构 如何查找PCI设备存取PCI配置空间读配置空间APIs写配置空间APIswhere的常量值共用部分类型0类型1 PCI总线通过使用比ISA更高的时钟速率来实现更好的性能&…

etcdctl defrag 剔除、添加etcd节点

零、准备工作 find / -name etcdctl cp /var/lib/containerd/io.containerd.snapshotter.v1.overlayfs/snapshots/12/fs/usr/local/bin/etcdctl /usr/local/bin/etcdctlalias ec"etcdctl --endpointshttps://127.0.0.1:2379 --cacert /etc/kubernetes/pki/etcd/ca.crt --…

【2024】MySQL库表基本操作

目录 登录数据库创建数据库直接创建数据库使用IF NOT EXISTS方式创建查看数据库信息删除数据库 数据表操作创建数据表增加新字段插入数据删除数据表 登录数据库 首先登录到数据库&#xff1a;输入用户名和密码登录到数据库内部 [rootlocalhost ~]# mysql -uroot -p Enter pas…

Locksupport凭证的底层原理

LockSupport的凭证&#xff08;通常称为“许可”或“permit”&#xff09;的底层原理主要涉及到Java的Unsafe类以及系统级的线程同步机制。LockSupport是Java 6&#xff08;JSR166-JUC&#xff09;引入的一个类&#xff0c;提供了基本的线程同步原语&#xff0c;其核心功能是通…

如何利用ChatGPT提升学术论文讨论部分的撰写质量和效率

大家好,感谢关注。我是七哥,一个在高校里不务正业,折腾学术科研AI实操的学术人。关于使用ChatGPT等AI学术科研的相关问题可以和作者七哥(yida985)交流,多多交流,相互成就,共同进步,为大家带来最酷最有效的智能AI学术科研写作攻略。经过数月爆肝,终于完成学术AI使用教…

利用正则表达式从字符串中提取浮点数

在 Python 中&#xff0c;使用正则表达式可以非常方便地从字符串中提取浮点数。Python 的 re 模块提供了正则表达式支持。下面是如何使用正则表达式提取浮点数的示例。 1、问题背景 在开发过程中&#xff0c;有时候我们需要从字符串中提取浮点数&#xff0c;例如从 HTML 代码中…

网关功能介绍

在微服务架构中&#xff0c;网关&#xff08;API Gateway&#xff09;扮演着至关重要的角色&#xff0c;它作为客户端和微服务之间的中介&#xff0c;负责路由、过滤、认证、限流等职责。以下是一些常见的网关实现&#xff1a; Spring Cloud Gateway&#xff1a; Spring Cloud …

linux系统中,计算两个文件的相对路径

realpath --relative-to/home/itheima/smartnic/smartinc/blocks/ruby/seanet_diamond/tb/parser/test_parser_top /home/itheima/smartnic/smartinc/corundum/fpga/lib/eth/lib/axis/rtl/axis_fifo.v 检验方式就是直接在当前路径下&#xff0c;把输出的路径复制一份&#xff0…

5-2 检测内存容量

1 使用的是bios 中断&#xff0c; 每次进行检测都会返回一块 内容。并且标志上&#xff0c;这块内存是否可用。 接下来是代码&#xff1a; 首先是构建 一个文件夹&#xff0c; 两个文件。 types.h 的内容。 #ifndef TYPES_H #define TYPES_H// 基本整数类型&#xff0c;下面的…

全球圆柱锂电池行业领军者!比克电池亮相2024深圳eVTOL展

2024深圳eVTOL产业发展大会暨低空经济展览会将于9月23-25日在深圳坪山燕子湖国际会展中心举办。展会将通过“两天论坛三天展览”的形式展开&#xff0c;专注未来城市空中交通新形态、民用有人驾驶、无人驾驶航空器、城市低空物流&#xff0c;并讨论eVTOL的整机研发、设计、制造…

拍卖新纪元:Spring Boot赋能在线拍卖解决方案

需求分析 1.1技术可行性&#xff1a;技术背景 在线拍卖系统是在Windows操作系统中进行开发运用的&#xff0c;而且目前PC机的各项性能已经可以胜任普通网站的web服务器。系统开发所使用的技术也都是自身所具有的&#xff0c;也是当下广泛应用的技术之一。 系统的开发环境和配置…

Python+selenium web测试入门基础!

自动化测试框架 from selenium import webdriver 获取浏览器对象 我这里是edge浏览器&#xff0c;用的是edge的webdriver # webdriver获取浏览器对象  driver webdriver.Edge() 尝试打开网站并关闭​​​​​​​ # 准备一个网址  url "https://www.baidu.com/"…

Vue2 与 Vue3 的区别有哪些

Vue 2 和 Vue 3 在许多方面都有显著的区别&#xff0c;包括性能、API 设计、功能特性等。以下是它们主要的区别&#xff1a; 1. 响应式系统 Vue 2: 基于 Object.defineProperty: Vue 2 使用 Object.defineProperty 来实现响应式数据。这种方法在处理对象属性时有一定的局限性…

包拯断案 | 数据库从库GTID在变化 为何没有数据写入@还故障一个真相

提问&#xff1a;作为DBA运维的你是否遇到过这些烦恼 1、数据库从库复制链路如何正确配置表过滤信息&#xff1f; 2、数据库从库的GTID在变化&#xff0c;实际却没有数据写入&#xff0c;究竟是什么原因&#xff1f; 心中有章&#xff0c;遇事不慌 作为DBA的你&#xff0c;…

如何构建短视频矩阵?云微客开启多账号协同作战

你有没有疑惑过&#xff0c;为什么有些账号每一次发布视频&#xff0c;都要艾特一下其他账号呢&#xff1f;那些被艾特的账号&#xff0c;你有点进去关注过吗&#xff1f;其实做过运营的都或多或少的接触过矩阵&#xff0c;短视频矩阵的玩法现在也逐步成为了趋势。企业通过多账…

GitHub Copilot Issue in Visual Studio Code “Status Ready (disabled)“

I’m facing an issue with GitHub Copilot in Visual Studio Code, where it’s not suggesting any code. Even though it says “enabled globally” in the extensions tab settings, the icon in the status bar has a diagonal line through it. When I click on the ico…