uniapp scroll-view滚动页面

news2024/11/15 13:44:34

页面滚动固定距离(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.coloradmin.cn/o/2102551.html

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

相关文章

大数据-116 - Flink DataStream Sink 原理、概念、常见Sink类型 配置与使用 附带案例1:消费Kafka写到Redis

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; 目前已经更新到了&#xff1a; Hadoop&#xff08;已更完&#xff09;HDFS&#xff08;已更完&#xff09;MapReduce&#xff08;已更完&am…

Cadence Virtuoso添加工艺库、转换工艺库格式

系统环境&#xff1a;Red Hat 操作软件&#xff1a;Virtuoso 工艺库&#xff1a;tsmc18rf 1、准备好工艺库文件&#xff0c;放在任意文件夹内&#xff0c;记住文件路径&#xff1a; 2、打开Virtuoso软件&#xff1a; 在桌面右键打开终端&#xff0c;输入&#xff1a; virtuo…

Web3D 技术发展瓶颈在哪里?

Web3D 技术的发展瓶颈主要集中在以下几个方面&#xff1a; 1、性能和优化&#xff1a;尽管现代浏览器和硬件逐步提高了性能&#xff0c;但高质量的3D渲染仍可能导致性能瓶颈。特别是在移动设备上&#xff0c;图形渲染和计算可能会受到限制。建议合理控制好项目资源量&#xff…

DataGridView用法合集【精品】

1.当前的单元格属性取得、变更 [VB.NET] Console.WriteLine(DataGridView1.CurrentCell.Value) Console.WriteLine(DataGridView1.CurrentCell.ColumnIndex) Console.WriteLine(DataGridView1.CurrentCell.RowIndex) DataGridView1.CurrentCell DataGridView1(0, 0) [C#] Con…

毕业设计选题系统

一、项目概述 Hi&#xff0c;大家好&#xff0c;今天分享的项目是《毕业设计选题系统》。 毕业论文选题是大学教学管理中的重要环节&#xff0c;关系到高校的教学质量。传统的手工管理方式工作效率低下、管理繁琐&#xff0c;浪费教师和学生的时间与精力的问题。本系统以提高…

鸿蒙HarmonyOS使用地图服务

1. 生成签名证书指纹 按照步骤生成签名证书指纹 步骤1&#xff1a; 步骤2&#xff1a; 步骤3&#xff1a;Key store file为生成的*.p12文件的存储路径&#xff0c;可以自己选择路径并自定义文件名&#xff0c;输入并确认密码后&#xff0c;点击确认 步骤4&#xff1a;Key s…

代码随想录算法day28 | 动态规划算法part01 | 理论基础、509. 斐波那契数、70. 爬楼梯、 746. 使用最小花费爬楼梯

理论基础 什么是动态规划 动态规划&#xff0c;英文&#xff1a;Dynamic Programming&#xff0c;简称DP&#xff0c;如果某一问题有很多重叠子问题&#xff0c;使用动态规划是最有效的。 所以动态规划中每一个状态一定是由上一个状态推导出来的&#xff0c;这一点就区分于贪…

关于位结构体及位操作总结

#include <stdio.h> #pragma pack(1) struct stu{char a:4; // a占用char的低4位 char b:4; // b占用char的高4位&#xff08;注意&#xff0c;这里实际上是与a共享同一个char的空间&#xff09; }; #pragma pack(4) int main() {struct stu s{.a2, //a:0010.b3, …

如何对单片机程序进行加密(防止别人破解)

单片机程序的破解无非就是非法途径获得源代码或者可执行文件&#xff08;hex文件&#xff09;。本文主要介绍两个方法防止别人从单片机fash中获取可执行文件&#xff08;hex文件&#xff09;。一方面保证别人不能获取你的hex文件&#xff0c;另一面就算别人非法获取你的hex文件…

Windows下的Redis启动报错Redis service failed to start

报错原因&#xff1a;Redis服务没有找到log文件 解决方案&#xff1a; 1、在Redis目录下打开redis.windows-service.conf文件 2、找到logfile存放目录&#xff0c;一般默认为Logs/redis_log.txt 3、在Redis目录创建Logs文件夹&#xff0c;在Logs文件夹下创建redis_log.txt文件…

工业图像输出卡设计原理图:FMC214-基于FMC兼容1.8V IO的Full Camera Link 输出子卡

FMC214-基于FMC兼容1.8V IO的Full Camera Link 输出子卡 一、板卡概述   基于FMC兼容1.8V IO的Full Camera Link 输出子卡支持Base、Middle、Full Camera link信号输出&#xff0c;兼容1.8V、2.5V、3.3V IO FPGA信号输出。适配xilinx不同型号开发板和公司内部各FMC载板。板…

Flutter修改Android包名

一、前言 我在将Android打包上传到google商店的时候提示我“com.example”已受到限制&#xff0c;请换一个软件包名称。“的错误。因此我们需要去修改flutter的Android包名。 二、操作流程 1.修改路径 android ——> app ——> src ——> debug ——> AndroidMa…

LearnOpenGL学习笔记

LearnOpenGL学习笔记 入门认识OpenGL核心模式和立即渲染模式扩展状态机对象 创建窗口视口渲染循环释放资源输入事件渲染 你好&#xff0c;三角形基本概念顶点输入顶点着色器编译着色器片段着色器链接顶点属性顶点数组对象索引缓冲对象 着色器GLSL数据类型输入与输出Uniform 纹理…

深度学习从入门到精通——yolov3算法介绍

YOLO v3 论文地址&#xff1a;https://pjreddie.com/media/files/papers/YOLOv3.pdf论文&#xff1a;YOLOv3: An Incremental Improvement 先验框 (1013)&#xff0c;(1630)&#xff0c;(3323)&#xff0c;(3061)&#xff0c;(6245)&#xff0c;(59 119)&#xff0c; (116 9…

C++代码规范 头文件

1. 头文件 通常每个 .cc 文件应该有一个配套的 .h 文件. 常见的例外情况包括单元测试和仅有 main() 函数的 .cc 文件. 正确使用头文件会大大改善代码的可读性和执行文件的大小、性能. 下面的规则将带你规避头文件的各种误区. 1.1. 自给自足的头文件 Tip 头文件应该自给自…

[某度信息流]SQL164,2021年11月每天新用户的次日留存率

牛客网在线编程 思路&#xff1a; 首先找出用户的注册日期&#xff0c;即date(min(in_time)) 转成date形式 建立两个辅助表&#xff0c;我先放代码&#xff0c;然后进行解释 withuser_reg as (selectuid,date(min(in_time)) as first_datefromtb_user_loggroup by1),…

【路径规划】在二维环境中快速探索随机树和路径规划的示例

摘要 本文介绍了快速探索随机树&#xff08;Rapidly-exploring Random Tree, RRT&#xff09;算法在二维环境中的路径规划应用。RRT是一种随机采样算法&#xff0c;能够快速构建从起点到目标点的路径&#xff0c;特别适用于复杂环境中的机器人路径规划。通过在随机方向上扩展树…

Vue3实时更新时间(年-月-日 时:分:秒)

代码案例 <script lang"ts" setup> import { ref,onMounted } from vue; const timer ref() const date ref("")//年月日 const moreTime ref("")//时分秒 onMounted(()>{//创建定时器1秒执行一次timer.value setInterval(() >…

数学建模强化宝典(10)多元线性回归模型

一、介绍 多元线性回归模型&#xff08;Multiple Linear Regression Model&#xff09;是一种用于分析多个自变量&#xff08;解释变量、预测变量&#xff09;与单个因变量&#xff08;响应变量、被预测变量&#xff09;之间线性关系的统计模型。这种模型假设因变量的变化可以通…

Proxyless的多活流量和微服务治理

1. 引言 1.1 项目的背景及意义 在当今的微服务架构中&#xff0c;应用程序通常被拆分成多个独立的服务&#xff0c;这些服务通过网络进行通信。这种架构的优势在于可以提高系统的可扩展性和灵活性&#xff0c;但也带来了新的挑战&#xff0c;比如&#xff1a; 服务间通信的复…