欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 健康 > 养生 > uniapp scroll-view滚动触底加载 height高度自适应

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

2025/4/3 6:21:30 来源:https://blog.csdn.net/weixin_45024453/article/details/141720327  浏览:    关键词: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

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词