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

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

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • MySQL中的锁详解
  • SLAM ORB-SLAM2(29)PnP估计姿态
  • C++ | Leetcode C++题解之第375题猜数字大小II
  • Java面试宝典-java基础07
  • 安嘉空间:智慧科技守护空间健康
  • 认知杂谈31
  • [图解]SysML和EA建模住宅安全系统-活动作为块
  • 备战英语四级每日单词分享(30个)---第十天
  • day43 | 300.最长递增子序列 674. 最长连续递增序列 718. 最长重复子数组
  • Java 实现不改变图片尺寸,增大图片大小(kb)
  • 虚幻5|技能栏UI优化(3)——优化技能UI并实现显示背景UI,实现技能界面设计,实现技能栏的删除和添加
  • 合宙LuatOS产品规格书——Air700EAQ
  • Redis安装+常用命令合集大全+Redis Desktop Manager
  • jQuery基础——选择器的补充方法——过滤方法、查找方法
  • 【Kotlin设计模式】Kotlin实现装饰器模式
  • (ckeditor+ckfinder用法)Jquery,js获取ckeditor值
  • 2017 前端面试准备 - 收藏集 - 掘金
  • 30天自制操作系统-2
  • 78. Subsets
  • canvas实际项目操作,包含:线条,圆形,扇形,图片绘制,图片圆角遮罩,矩形,弧形文字...
  • JavaScript 基本功--面试宝典
  • REST架构的思考
  • SpringCloud(第 039 篇)链接Mysql数据库,通过JpaRepository编写数据库访问
  • tweak 支持第三方库
  • Web Storage相关
  • XForms - 更强大的Form
  • 对JS继承的一点思考
  • 基于axios的vue插件,让http请求更简单
  • 聊聊flink的TableFactory
  • 十年未变!安全,谁之责?(下)
  • 阿里云ACE认证之理解CDN技术
  • 翻译 | The Principles of OOD 面向对象设计原则
  • ​如何使用QGIS制作三维建筑
  • $var=htmlencode(“‘);alert(‘2“); 的个人理解
  • %@ page import=%的用法
  • (04)odoo视图操作
  • (1)bark-ml
  • (附源码)springboot 校园学生兼职系统 毕业设计 742122
  • (附源码)SSM环卫人员管理平台 计算机毕设36412
  • (六) ES6 新特性 —— 迭代器(iterator)
  • (牛客腾讯思维编程题)编码编码分组打印下标(java 版本+ C版本)
  • (全部习题答案)研究生英语读写教程基础级教师用书PDF|| 研究生英语读写教程提高级教师用书PDF
  • (实测可用)(3)Git的使用——RT Thread Stdio添加的软件包,github与gitee冲突造成无法上传文件到gitee
  • (算法)硬币问题
  • (原創) 未来三学期想要修的课 (日記)
  • (转) RFS+AutoItLibrary测试web对话框
  • (转)Oracle存储过程编写经验和优化措施
  • .bat批处理(十):从路径字符串中截取盘符、文件名、后缀名等信息
  • .dwp和.webpart的区别
  • .NET Core 版本不支持的问题
  • .NET MAUI Sqlite数据库操作(二)异步初始化方法
  • .NET MVC之AOP
  • .net 按比例显示图片的缩略图
  • .Net下使用 Geb.Video.FFMPEG 操作视频文件
  • .NET学习全景图