uniapp scroll-view滚动触底加载 height高度自适应

背景:

scroll-view组件是使用,官网说必须给一个高度height,否则无法滚动,所以刚开始设置了<scroll-view :style="'height: 94vh'" :scroll-y="true">设置了一个高度,想着vh应该挺合适的;后来在不同手机应用中,发现不同手机,滚动触底加载的动态效果显示不出来。

经过排查,解决办法是让height自适应。。。即,不设置height高度,在css里面设置:

                   .content_box {

                        min-height: 0;

                        width: 100%;

                        height: 100%;

                        uni-scroll-view {

                            height: 100%;

                        }

                    }

效果展示:

以前我使用scroll-view组件的时候,滚动触底加载功能的时候,极少能看到加载的动态效果,我还以为是接口请求响应得太快所以看不见。。。

直到相应到最后一条,数据会被遮盖,显示不全。。。

1.scroll-view组件的高度height要设置,否则不能滚动

2.通过vh单位设置高度,

3.通过css样式,让scroll-view组件的高度自适应 

一、通过vh单位设置高度

效果:

能根据调试的手机,调整vh的值,但是不同的手机高度会有差异。

代码:

<view class="content_box"><scroll-view :style="'height: 94vh'" :scroll-y="true"><view v-for="i, index in tableData" :key="index"><CardTopBTNVue :data="i" :myIndex="index + 1"></CardTopBTNVue></view><u-loadmore :status="'nomore'" /></scroll-view>
</view>

二、通过css样式让高度自适应

效果:

html页面布局,一共两层:外面一层<view>,内层<scroll-view> 

css样式:外层min-height:0;内层组件的名字,使其高度height:100%

代码:

<view class="content_box"><scroll-view :scroll-y="true" :scroll-top="scrollTop" @scrolltolower="handelShipLower"><view v-for="(i, index) in shipArr" :key="index"><CardTopBTNVue :data="i"></CardTopBTNVue></view><u-loadmore :status="loadings" v-if="isShowBtm" /></scroll-view>
</view>
                .content_box {min-height: 0;width: 100%;height: 100%;uni-scroll-view {height: 100%;}}

浏览器:

 

 三、到底设不设置height

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

PhpStorm2024版设置自动换行(软换行)

Settings > Editor > General > Soft Wraps 选中并加上对应的文件

面试SQL题的水到底有多深?一文带你揭晓

不谋万世者&#xff0c;不足谋一时&#xff1b;不谋全局者&#xff0c;不足谋一域 目录 0 面试现状 1 面试SQL题目的难度及特点 1.1 题目场景化 1.2 题目算法化 1.3 方法多元化 2 破局之道 3 总结 数字化建设通关指南 主要内容&#xff1a; &#xff08;1&#xff09;SQL进阶实…

四、监控搭建-Prometheus-采集端批量部署

四、监控搭建-Prometheus-采集端批量部署 1、背景2、目标3、传承4、操作4.1、准备部署工具4.2、编制部署脚本4.3、服务端添加客户端 1、背景 在前三篇中我们搭建了Prometheus平台&#xff0c;采集端部署和配合图形化grafana部署&#xff0c;将Linux主机进行监控。基本完成了一…

『功能项目』怪物反击主角复活【14】

本章项目视频展示 当前文章成果展示 我们打开上一篇13技能爆炸与伤害数值显示的项目&#xff0c; 新建一个脚本InfoSystem.cs 新建一个游戏管理器GameManager.cs 在场景中创建一个空物体命名为GameManager 将GameManager.cs脚本挂载至空物体GameManager对象身上 增添PlayerRayC…

【SpringBoot】电脑商城-10-商品功能

商品热销排行 1 商品-创建数据表 1.使用use命令先选中store数据库。 USE store;2.在store数据库中创建t_product数据表。 CREATE TABLE t_product (id int(20) NOT NULL COMMENT 商品id,category_id int(20) DEFAULT NULL COMMENT 分类id,item_type varchar(100) DEFAULT N…

Loki Unable to fetch labels from Loki (no org id)

应该是多租户相关导致的 参考文档: 参考文档cMulti-tenancy | Grafana Loki documentationDescribes how Loki implements multi-tenancy to isolate tenant data and queries.https://grafana.com/docs/loki/latest/operations/multi-tenancy/ https://github.com/grafana…

【Git 学习笔记_23】Git 实用冷门操作技巧(二)——妙用 git bisect 与 git blame 进行代码调试

文章目录 11.3 用 git bisect 进行调试11.4 使用 git blame 命令 本节所在位置&#xff1a; 活用 git stash&#xff08;上&#xff09;保存并应用 stash&#xff08;上&#xff09;用 git bisect 进行调试&#xff08;二&#xff09;✔️使用 git blame 命令&#xff08;二&am…

零基础Opencv学习(三)

概述&#xff1a;主要目的是为了在图像中获取所需要的特征信息&#xff0c;比如直线或者圆等 一、标准霍夫变换 cv::Mat midImage, dstImage;/// 边缘检测 转化灰度图cv::Canny(image, midImage, 50, 200, 3);cv::cvtColor(midImage, dstImage, CV_GRAY2BGR);/// 进行霍夫线变…

浅谈SpringMvc的核心流程与组件

一、SpringMvc的核心流程 当发起请求时被前置的控制器(DispatcherServlet)拦截到请求&#xff0c;根据请求参数生成代理请求&#xff0c;找到请求对应的实际控制器&#xff0c;控制器处理请求&#xff0c;创建数据模型&#xff0c;访问数据库&#xff0c;将模型响应给中心控制…

ubuntu24下python3.9安装pytorch

安装gpu版pytorch 1.去官网查找命令 https://pytorch.org/get-started/previous-versions/由于我们安装的是CUDA12.1&#xff0c;所以我们选择12.1的进行安装 安装完成之后通过下面代码进行测试 >>> import torch >>> print(torch.cuda.is_available()) T…

Linux入门攻坚——30、sudo、vsftpd

su&#xff1a;Switch User&#xff0c;即切换用户 su [-l user] -c ‘COMMAND’ 如&#xff1a;su -l root -c ‘COMMAND’ 如果没有指定-l user&#xff0c;则默认是root sudo&#xff1a;可以让某个用户不需要拥有管理员的密码&#xff0c;而可以执行管理员的权限。 需…

raw.githubusercontent.com未能解析” 解决方案

1.操作场景 通过windows11 powershell 下载依赖包 2.报错信息如下 irm : 未能解析此远程名称: raw.githubusercontent.com 所在位置 行:1 字符: 27 & ([scriptblock]::Create((irm "https://win11debloat.raphi.re/"))) ~~~~~~~~~…

2 Python开发工具:PyCharm的安装和使用

本文是 Python 系列教程第 2 篇&#xff0c;完整系列请查看 Python 专栏。 1 安装 官网下载地址https://www.jetbrains.com.cn/pycharm/&#xff0c;文件比较大&#xff08;约861MB&#xff09;请耐心等待 双击exe安装 安装成功后会有一个30天的试用期。。。本来想放鸡火教程&…

Mybatis中的缓存

一&#xff0c;为什么要使用缓存 1&#xff0c;缓存的作用 缓存(cache&#xff09;的作用是为了减去数据库的压力&#xff0c;提高查询性能。 缓存实现的原理&#xff1a; 从数据库中查询出来的对象在使用完后不要销毁&#xff0c;而是存储在内存&#xff08;缓存&#xff09;…

智能指针(RAII)

智能指针&#xff08;RAII&#xff09; 一、内存泄漏1、介绍2、原因3、泄漏的内存类型分类 二、RAII1、介绍2、基本思想3、优点4、实现方式 三、unique_ptr1、介绍2、主要特性3、注意事项4、unique_ptr类5、示例代码6、运行结果7、简单实现 四、shared_ptr1、介绍2、主要特点3、…

单自由度无阻尼系统振动分析

特别感谢&#xff1a;https://www.bilibili.com/video/BV114411y7ab/?p6&spm_id_frompageDriver&vd_sourceebe07816bf845358030fc92d23830b29 本文图片该系列视频 tips&#xff1a;关于特征方程与振动方程&#xff1a; 特征方程有助于我们理解和确定系统的固有频率和模…

C语言基础(二十)

链表是一种常见的数据结构&#xff0c;通常用来存储一系列元素&#xff0c;每个元素由一个节点来表示。在链表中&#xff0c;每个节点包含两部分&#xff1a;数据元素本身和指向下一个节点的指针。这种结构使得链表中的元素在内存中不是连续存储的&#xff0c;而是通过指针连接…

随笔九、SARADC按键程控测试

目录 1. 泰山派环境 2. 按键3分析 3. 编程测试 1. 泰山派环境 泰山派开发板上有3个按键 按键1是电源按键PWRON&#xff0c;实测按几下会导致开发板重启 按键2是复位按键RESET&#xff0c;按下立马复位重启 按键3是升级按键RECOVER&#xff0c;配合RESET按键可以使开发板进…

Unity编辑器扩展之Scene视图扩展

内容将会持续更新&#xff0c;有错误的地方欢迎指正&#xff0c;谢谢! Unity编辑器扩展之Scene视图扩展 TechX 坚持将创新的科技带给世界&#xff01; 拥有更好的学习体验 —— 不断努力&#xff0c;不断进步&#xff0c;不断探索 TechX —— 心探索、心进取&#xff01; …

使用cJSON进行JSON文件读写

推荐cJSON下载地址&#xff1a; Git地址&#xff1a;https://github.com/arnoldlu/cJSON 可以尝试&#xff1a;sudo apt-get install libcjson-dev&#xff0c;笔者未使用该方式。 百度AI搜索程序&#xff0c;供参考&#xff0c;部分函数名称应以cJSON模块内定义为主 json文…