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…

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 --…

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

在 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/"…

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

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

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

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

pyautogui进行点击失效,pyautogui.click()失效

背景&#xff1a;在Pycharm里&#xff0c;使用pythonpyautogui调用 .exe程序文件时候&#xff0c;当程序界面出来之后&#xff0c;鼠标失去反应&#xff0c;用pyautogui进行点击。后面尝试使用图片相似也无法实行点击。 解决方法&#xff1a;运行Pycharm或者其他ide的时候选择…

黑马点评2——商户查询缓存(P37店铺类型查询业务添加缓存练习题答案)redis缓存、更新、穿透、雪崩、击穿、工具封装

文章目录 什么是缓存&#xff1f;添加Redis缓存店铺类型查询业务添加缓存练习题 缓存更新策略给查询商铺的缓存添加超时剔除和主动更新的策略 缓存穿透缓存空对象布隆过滤 缓存雪崩解决方案 缓存击穿解决方案基于互斥锁方式解决缓存击穿问题基于逻辑过期的方式解决缓存击穿问题…

极市开发平台yolov8训练无人机数据集样例数据流程

先进入vscode&#xff0c;进入src_repo文件夹。 第一步&#xff0c;克隆一个比较好的博主的库&#xff1a; GitHub - Incalos/YOLO-Datasets-And-Training-Methods: This project involves making custom datasets for the YOLO series and model training methods for YOLO.…

关于蓝屏查看日志分析原因

一、前提 虽然电脑经常蓝屏&#xff0c;或者发生了蓝屏现象&#xff0c;但是仍然可以进入系统&#xff0c;并且可以进行桌面操作。 二、查看蓝屏日志 1.按下win键&#xff0c;搜索计算机管理。 2.依次点击&#xff1a;系统工具->事件查看器->Windows日志->系统 3.在…

【项目二】C++高性能服务器开发——日志系统(日志器,日志级别,日志事件)

知识点备忘录 其实也没啥 操作记录 在乌邦图上写的&#xff0c;先是模仿sylar创建了目录 进入sylar文件夹&#xff0c;有今天写的log.h头文件 其中log_test.cpp是为了测试log.h能否正常运行建的&#xff0c;只是个测试文件 log.h写了三个类&#xff0c;日志级别&#xff0…

PHP一站式解决方案高级房产系统小程序源码

一站式解决方案&#xff0c;高级房产系统让房产管理更轻松 &#x1f3e0;【开篇&#xff1a;告别繁琐&#xff0c;迎接高效房产管理新时代】&#x1f3e0; 你是否还在为房产管理的繁琐流程而头疼&#xff1f;从房源录入、客户咨询到合同签订、售后服务&#xff0c;每一个环节…