pullrefresh和van-swipe-cell一起使用时,下拉刷新后,立马瞬间上拉列表使其超出可视区,列表在请求完成更新后依然不显示在可视区,消失了,下拉也拉不下来
nicky132 opened this issue · comments
Reproduction Link
https://codesandbox.io/p/devbox/vant-4-issue-template-8fuq5o
Vant Version
^2.12.54"
Describe the Bug
<template>
<van-pull-refresh ref="pullRefresh" v-model="loading" @refresh="onRefresh"
:style="{ minHeight: `calc(100% - ${tabsHeight}px)` }">
<van-swipe-cell v-for="(item, index) in newsList" :key="item.id">
<div class="news-item-name" @click="goGroup(item)">
<my-icon :type="getFileIcon(item)"></my-icon>
<div class="item-name">
<div class="name-wrap">
<div class="name-left">
<span class="name">{{ item.name}}</span>
</div>
</div>
</div>
<div @click.stop="goCollection(item, index)">
<img v-if="item.show" class="collect-icon" src="@/assets/images/ok.png"
alt="" />
<img v-else class="collect-icon" src="@/assets/images/ok.png" alt="" />
</div>
</div>
<template #right v-if="item.show">
<van-button class="newname-btn" square text="重命名" @click="newnameOpt(item)" />
<van-button class="delname-btn" square text="删除" @click="delOpt(item)" />
</template>
</van-swipe-cell>
<rename-dialog ref="renameDialog"></rename-dialog>
</van-pull-refresh>
</template>
<script>
export default {
data(){
return{
newsList:[],
loading:false,
}
},
created(){
},
mounted(){
},
methods(){
onRefresh() {
this.getData(() => {
Toast('刷新成功');
this.loading = false;
});
},
async getData(cb = () => { }) {
let apiData
const allRes = await getAll()
apiData = allRes.data.sort((a, b) => a.st - b.st)
this.newsList = apiData.filter((item) => item.name!= '');
cb && cb();
},
}
}
</script>Reproduce Steps
不好意思,因为有单位代码,所以就只能先这样搞个问题点的核心片段来看看,没有复现链接了.
主要功能点是下拉刷新:
1、先下拉刷新
2、拖动下拉刷新滚动条到能显示“加载中”文字横条出来时,手松掉
3、这个时候接口正要去请求,还是没请求完成.
4、手立马拖住列表往上拉,瞬间上拉,直到列表被拉到超出可视区为止就松手.
5、等接口请求完成,提示“刷新完成”时候,会发现,列表没不到了,依然停留在超出可视区的区域,手触摸原先列表区域往下拉也丝毫没有反应,就是卡住了.这个问题手机浏览器上不好复现.localhost本地跑起来的项目也不好复现.我这个问题是在ipad的app内嵌h5页面情况下,100%复现,ipad横屏展示的
Device / Browser
ipad
