共计 1149 个字符,预计需要花费 3 分钟才能阅读完成。
背景:
在安卓设施的钉钉 APP 中,点击关上撮合列表页面,默认第一个 Tab,列表呈现上拉不加载数据问题,但当切换 Tab 后,列表均能够上拉加载数据。
配图 :
代码:
<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 事件)
猜测:
- 尝试了很多种办法均失败,偶尔发现 van-empty 组件的地位无关,原先是写在 van-list 组件中,对 carCard 和 van-empty 进行 v -if 判断,这样 van-list 不会从新渲染计算高度和地位;
- 在 IOS 设施、PC、甚至安卓手机自带的浏览器和微信点开的页面,均无此问题,大胆猜想,安卓钉钉的 webview 有点太老了,导致计算高度和列表底部与可视区域的间隔不精确,从而无奈触发 load 事件,也就无奈上拉加载数据。
解决方案:
-
进入页面,默认为其余 Tab(非第一个 Tab) 时,第一个 Tab 的列表就没有上述问题了。—- 然而这种不举荐,与用户交互习惯南辕北辙;
- van-empty 和 van-list 同级,当有数据时,v-if 中的 state.list.length > 0 为 true,van-list 会从新渲染,就会从新计算列表高度和地位,完满解决了这个适配问题。— 👍
正文完