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的值，但是不同的手机高度会有差异。
  代码：

1. <view class="content_box">
2.      <scroll-view :style="'height: 94vh'" :scroll-y="true">
3.          <view v-for="i, index in tableData" :key="index">
4.            <CardTopBTNVue :data="i" :myIndex="index + 1">
5.             </CardTopBTNVue>
6.          </view>
7.          <u-loadmore :status="'nomore'" />
8.      </scroll-view>
9. </view>

复制代码

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

效果：

   html页面布局，一共两层：外面一层<view>，内层<scroll-view> 
  css样式：外层min-height:0；内层组件的名字，使其高度height:100%
  代码：

1. <view class="content_box">
2.         <scroll-view :scroll-y="true" :scroll-top="scrollTop" @scrolltolower="handelShipLower">
3.                 <view v-for="(i, index) in shipArr" :key="index">
4.                                 <CardTopBTNVue :data="i">
5.                                 </CardTopBTNVue>
6.                 </view>
7.                 <u-loadmore :status="loadings" v-if="isShowBtm" />
8.         </scroll-view>
9. </view>

复制代码

1.                 .content_box {
2.                                                 min-height: 0;
3.                                                 width: 100%;
4.                                                 height: 100%;
6.                                                 uni-scroll-view {
7.                                                         height: 100%;
8.                                                 }
9.                                         }

复制代码

欣赏器：

 
 三、到底设不设置height

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。