uniapp组建scroll-view初始化页面设置scrollTop无效解决办法

news2024/11/29 21:05:36

官方文档:scroll-view | uni-app官网

一 . scroll-view的基本用法

使用竖向滚动时,需要给 <scroll-view> 一个固定高度,通过 css 设置 height;

<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y">
</scroll-view>
 

二.设置scrollTop无效
       

在实际运用过程中,发现设置了scroll-top无效,滚动条位置并没有发生变化,是因为微信小程序的官方框架处于性能考虑,初始化设置scroll-top不会重新渲染页面,需要将scroll-top的是放在一个事件内执行才可以生效。

这里有一个坑,初始值设置(注意:不要设置成0,不然无效)

	const scrollTop = ref(0.01)

需要将scroll-top的是放在一个事件内执行才可以生效。

const goTop = ()=>{
    scrollTop.value = scrollTop +0.00001
}

 这里也有一个坑,如果事件执行时,scrollTop的值和原来一样,他是不会生效的(就算页面滚动了,但是scrollTop是不变的),所以在触发回到顶部事件,重新赋值的时候,可以加一个0.0001,页面就会回到顶部了。

注意:触发几次就要加几次,因为每次的值都不能和之前的值一样。

三.请求接口拿到列表数据后再设置scroll-top无效

因为请求接口拿到数据之后,重新给列表赋值,scroll-view列表就需要时间渲染出来,等渲染出来之后,才可以设置scroll-top高度,不然没渲染出来之前,scroll-view没有高度,你设置scroll-top肯定是无效的。所以拿到数据之后,要等个500毫秒再设置:

setTimeout(() => {
            setLevelTop.value = 300
        }, 500)

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

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

相关文章

Web day02 Js Vue Ajax

目录 1.javascript: 1.js的引入方式&#xff1a; 2.js变量 & 数据类型 & 输出语句&#xff1a; 模板字符串&#xff1a; 3.函数 & 自定义对象&#xff1a; 4. json 字符串 & DOM操作&#xff1a; 5. js事件监听&#xff1a; 6.js的模块化导入或者导出&a…

【面向对象的程序设计——集合框架】主要接口

文章目录 主要接口集合框架的主要接口Collect接口Set接口实现Set接口的类SortedSet接口 List接口&#xff1a;线性表实现List接口的类&#xff1a; Queue接口实现Queue接口的类 Map接口Map接口的定义Map接口的方法SortedMap接口 主要接口 集合框架的主要接口 声明了对各种集合…

工业物联网网关在设备接入物联网中的核心作用

一、工业物联网网关的定义与功能 工业物联网网关是工业领域中的一种重要设备&#xff0c;它位于工业物联网系统的边缘位置&#xff0c;负责连接、管理和协调工业设备与云平台之间的通信。作为边缘计算的关键组件&#xff0c;工业物联网网关能够实现工业设备、传感器、PLC、DCS…

2024年第十三届”认证杯“数学中国数学建模国际赛(小美赛)

↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

selinux和防火墙实验

1 、 selinux 的说明 SELinux 是 Security-Enhanced Linux 的缩写&#xff0c;意思是安全强化的 linux 。 SELinux 主要由美国国家安全局&#xff08; NSA &#xff09;开发&#xff0c;当初开发的目的是为了避免资源的误用。 系统资源都是通过程序进行访问的&#xff0c;如…

flink学习(12)——checkPoint

如何设置checkPoint package com.bigdata.day06;/** * 1、需要三句话 * 2、设置完checkPoint后若程序出现异常&#xff0c;会一直重启 * 3、此时是自动进行checkPoint保存 * 4、注意&#xff1a;此时如果有checkpoint ,是不会出现异常的&#xff0c;需要将checkpoint的代码关…

前端面试题-1(详解事件循环)

1.了解浏览器的进程模型 1.什么是进程&#xff1f; 程序运行需要有它自己专属的内存空间&#xff0c;可以把这块内存空间简单的理解为进程 每个应用至少有一个进程&#xff0c;进程之间相互独立&#xff0c;即使要通信&#xff0c;也需要双方同意。 2.什么是线程&#xff1f…

http的文件上传和下载原理

目录 一&#xff1a;上传 1&#xff1a;http请求格式 2&#xff1a;文件上传类型分析 1&#xff1a;md5秒传 2&#xff1a;分片上传 1. 什么是分片上传 2. 分片上传的场景 3&#xff1a;断点续传 1. 什么是断点续传 2. 应用场景 3. 实现断点续传的核心逻辑 4. 实现流…

【计算机视觉】图像基本操作

1. 数字图像表示 一幅尺寸为MN的图像可以用矩阵表示&#xff0c;每个矩阵元素代表一个像素&#xff0c;元素的值代表这个位置图像的亮度&#xff1b;其中&#xff0c;彩色图像使用3维矩阵MN3表示&#xff1b;对于图像显示来说&#xff0c;一般使用无符号8位整数来表示图像亮度&…

VSCode 下载 安装

VSCode【下载】【安装】【汉化】【配置C环境&#xff08;超快&#xff09;】&#xff08;Windows环境&#xff09;-CSDN博客 Download Visual Studio Code - Mac, Linux, Windowshttps://code.visualstudio.com/Downloadhttps://code.visualstudio.com/Download 注意&#xff0…

【Python入门】Python数据类型

文章一览 前言一、变量1.1.如何使用变量1.2.如何定义变量的名字&#xff08;标识符&#xff09; 二、数据类型2.1 整型数据2.2 浮点型数据2.3 布尔型&#xff08;bool&#xff09;数据2.4 复数型数据2.5 字符串类型1 > 字符串相加&#xff08;合并&#xff09;&#xff08;&…

算法基础 - 高斯牛顿法(曲线拟合)

文章目录 1. 高斯牛顿法发展历程2、问题的引出3、高斯牛顿法的前世3.1、一阶&#xff0c;二阶梯度法共有原理3.2、最速下降法&#xff08;一阶梯度法&#xff09;3.3、牛顿法&#xff08;二阶梯度法&#xff09; 4、高斯牛顿法4.1 高斯牛顿法的思想4.2 最小二乘问题4.3 高斯牛顿…

Vue+Element Plus实现自定义表单弹窗

目录 一、基本框架 1.父组件index.vue 2.子组件FormPop.vue 二、细节补充 1&#xff09;input、textarea、select、input number 2&#xff09;daterange、date、monthrange 3&#xff09;数据定义 4&#xff09;没改样式的效果 5&#xff09;最终效果 三、最终代码 …

VMware Workstation Pro下载安装及简单设置

VMware Workstation Pro下载 方法一&#xff1a;官网下载 https://support.broadcom.com/group/ecx/productdownloads?subfamilyVMwareWorkstationPro账号请自行注册&#xff0c;选择最新版本17.6.1 下载后用md5sum_x64.exe验证下载的文件完整性 方法二 百度网盘 通过网…

ospf协议(动态路由协议)

ospf基本概念 定义 OSPF 是典型的链路状态路由协议&#xff0c;是目前业内使用非常广泛的 IGP 协议之一。 目前针对 IPv4 协议使用的是 OSPF Version 2 &#xff08; RFC2328 &#xff09;&#xff1b;针对 IPv6 协议使用 OSPF Version 3 &#xff08; RFC2740 &#xff09;。…

数据结构之循环链表和栈

一、循环链表 1、概念 循环链表&#xff1a;就是首尾相连的链表&#xff0c;通过任意一个节点&#xff0c;都能将整个链表遍历一遍 分类&#xff1a;单向循环链表、双向循环链表 2、单向循环链表的类格式 单向循环链表也就是单向链表的最后一个节点的next域不再为None,而是…

linux安装部署mysql资料

安装虚拟机 等待检查完成 选择中文 软件选择 网络和主机名 开始安装 设置root密码 ADH-password 创建用户 等待安装完成 重启 接受许可证 Centos 7 64安装完成 安装mysql开始 Putty连接指定服务器 在 opt目录下新建download目录 将mysql文件传到该目录下 查看linux服务器的…

HTML 霓虹灯开关效果

HTML 霓虹灯开关效果 1.简介&#xff1a;该代码为纯html&#xff0c;CSS写在了内部&#xff0c;不需要额外引入&#xff0c;霓虹灯开关效果很漂亮&#xff0c;应用在个人物联网项目中是一个比较不错的选择。 2.运行效果&#xff1a; 3.源码&#xff1a; <!DOCTYPE html&g…

uniapp开发支付宝小程序自定义tabbar样式异常

解决方案&#xff1a; 这个问题应该是支付宝基础库的问题&#xff0c;除了依赖于官方更新之外&#xff0c;开发者可以利用《自定义 tabBar》曲线救国 也就是创建一个空内容的自定义tabBar&#xff0c;这样即使 tabBar 被渲染出来&#xff0c;但从视觉上也不会有问题 1.官方文…

24/11/26 视觉笔记 通过特征提取和透视变换查找对象

在本节中我们将检测和跟踪任意大小的对象&#xff0c;这些对象可能是在不同角度或者在部分遮挡的情况下观察到的。 为此我们将运用特征描述子&#xff08;Feature Descriptor&#xff09;&#xff0c;这是捕获感兴趣对象的重要属性的一种方式。我们这样是为了即使将对象嵌入繁…