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%;
}
}
效果展示:
https://i-blog.csdnimg.cn/direct/a36d1bc6096e4c328f71cfbe15d1c32d.png从前我使用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%;
}
} 欣赏器:
https://i-blog.csdnimg.cn/direct/55717d59482a4b488548458da6ccdab4.png
三、到底设不设置height
https://i-blog.csdnimg.cn/direct/a7667c74c54945c9ab9ce0e118dcebb3.png
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。
页:
[1]