当前位置: 首页 > article >正文

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

官方文档: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.kler.cn/a/415295.html

相关文章:

  • 微信小程序全局配置:TabBar与页面配置详解
  • Android获取内置卡、内置U盘和挂载U盘路径和内存大小
  • OminiControl:一个新的FLUX通用控制模型,单个模型实现图像主题控制和深度控制
  • [AutoSar]BSW_Diagnostic_007 BootLoader 跳转及APP OR boot response 实现
  • 2.mybatis整体配置
  • 光伏功率预测!Transformer-LSTM、Transformer、CNN-LSTM、LSTM、CNN五模型时序预测
  • 3.20MayBeAndroid
  • 二叉树知识
  • BurpSuite安装教程(详细!!附带下载链接)
  • C++算法练习-day50——538.把二叉树转换为累加树
  • 第7篇 寻找最大数___ARM C语言程序<三>
  • Elasticsearch与NLP的深度融合:文本嵌入与向量搜索实战指南
  • Linux:makefile的使用
  • DIY-Tomcat part 3 实现对动态资源的请求
  • 在shardingsphere执行存储过程
  • 力扣每日一题 单调数组对的数目(dp)
  • 期权懂|期权中的期权到期日引力是什么意思?
  • TextFSM模板太复杂?ntc-templates让一切变得简单!
  • Android studio与JS交互
  • Android Studio 右侧Gradle窗口只有test的task问题解决
  • pytest+allure生成报告显示loading和404
  • 浅谈C#库之DevExpress
  • Rust 组织管理
  • 知识点回顾
  • python的文件操作练习
  • 基于Java Springboot社区助老志愿者服务平台