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

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

一 . scroll-view的基本用法

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

html 复制代码
<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y">
</scroll-view>
 

二.设置scrollTop无效

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

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

javascript 复制代码
	const scrollTop = ref(0.01)

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

javascript 复制代码
const goTop = ()=>{
    scrollTop.value = scrollTop +0.00001
}

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

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

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

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

javascript 复制代码
setTimeout(() => {
            setLevelTop.value = 300
        }, 500)
相关推荐
你真的可爱呀23 分钟前
uniapp学习【路由跳转 +数据请求+本地存储+常用组件】
前端·学习·uni-app
2501_915106326 小时前
iOS 26 APP 性能测试实战攻略:多工具组合辅助方案
android·macos·ios·小程序·uni-app·cocoa·iphone
00后程序员张15 小时前
iOS混淆与IPA文件加固全流程实战 防止苹果应用被反编译的工程级方案
android·ios·小程序·https·uni-app·iphone·webview
草字15 小时前
uniapp 打开横竖屏。usb调试时可以横竖屏切换,但是打包发布后却不行?
java·前端·uni-app
2501_9151063216 小时前
iOS 应用加固与苹果软件混淆指南,如何防止 IPA 被反编译与二次打包?
android·ios·小程序·https·uni-app·iphone·webview
赵庆明老师18 小时前
Uniapp微信小程序开发:全局变量的使用
微信小程序·小程序·uni-app
2501_9159214319 小时前
iOS 应用加固与苹果软件混淆全解析 IPA 文件防反编译、混淆加密与无源码加固策略
android·macos·ios·小程序·uni-app·cocoa·iphone
Jyywww12120 小时前
uniapp uni.chooseImage+uni.uploadFile使用方法与详解
开发语言·javascript·uni-app
2501_916007471 天前
iOS 代上架实战指南,从账号管理到使用 开心上架 上传IPA的完整流程
android·macos·ios·小程序·uni-app·cocoa·iphone
2501_915918411 天前
iOS混淆与IPA文件加固深度解析,从反编译风险到苹果应用安全工程实践
android·macos·ios·小程序·uni-app·cocoa·iphone