Vue中 Van-List上拉不加载数据的适配问题

like

背景:

在安卓设备的钉钉APP中,点击打开撮合列表页面,默认第一个Tab,列表出现上拉不加载数据问题,但当切换Tab后,列表均可以上拉加载数据。

配图
image.png

代码:

 <van-tabs v-model:active="state.activeTab" @click="onClickTab">
      <van-tab v-for="(tab, index) in state.matchStausTabs" :title="tab" :name="index+1" :key="index">
        <van-pull-refresh v-model="state.refreshing" @refresh="onRefresh">
          <van-list
            v-model:loading="state.loading"
            :finished="state.finished"
            :finished-text="state.finishedText"
            v-model:error="state.error"
            error-text="请求失败,点击重新加载"
            @load="onLoad"
          >
            <CarCard
              v-if="state.list.length > 0"       
              v-else       
              v-for="(item, index) in state.list"
              :key="index"
              :carInfo='item'
              @onJumpDetail="onJumpDetail(item)"
            >
            </CarCard>
            <van-empty v-else description="暂无数据"/>
          </van-list>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>

理论:

List 的运行机制(List 会监听浏览器的滚动事件并计算列表的位置,当列表底部与可视区域的距离小于 offset 时,List 会触发一次 load 事件)

猜想:

  1. 尝试了很多种方法均失败,偶然发现van-empty组件的位置有关,原先是写在van-list组件中,对carCard和van-empty进行v-if判断,这样van-list不会重新渲染计算高度和位置;
  2. 在IOS设备、PC、甚至安卓手机自带的浏览器和微信点开的页面,均无此问题,大胆猜测,安卓钉钉的webview有点太老了,导致计算高度和列表底部与可视区域的距离不准确,从而无法触发load 事件,也就无法上拉加载数据。

解决方案:

  1. 进入页面,默认为其他Tab(非第一个Tab)时,第一个Tab的列表就没有上述问题了。----但是这种不推荐,与用户交互习惯背道而驰;

  2. van-empty和van-list同级,当有数据时,v-if中的state.list.length > 0为true,van-list会重新渲染,就会重新计算列表高度和位置,完美解决了这个适配问题。--- 👍

image.png

阅读 1.9k

正向积累

2 声望
2 粉丝
0 条评论

正向积累

2 声望
2 粉丝
文章目录
宣传栏