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

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

article 2024/11/16 3:49:54

背景：

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%;
						}
					}

浏览器：