问题描述
list组件向下滑动,加载第二页数据时,加载后组件就返回顶部了。
我仔细看了下,是在数据加载前就返回顶部了,还望大神指点。
如下图所示:
相关代码
<van-pull-refresh v-model="loading" @refresh="onRefresh">
<van-list
v-model="loading"
:finished="finished"
:error.sync="error"
finished-text="没有更多了"
error-text="好像出了点问题,再点下试试?"
@load="onLoad"
>
<van-cell
v-for="(item, index) in sourceList"
:key="index"
class="app-margin-top-sm"
>
...
</van-cell>
</van-list>
</van-pull-refresh>
...
data() {
return {
loading: false,
finished: false,
error: false,
sourceList: [],
listQuery: {
current: 1,
size: 10,
...//相关查询参数
}
}
},
mounted() {
this.loadTableData()
},
methods: {
loadTableData() {
this.listQuery.current = 1
this.sourceList = []
this.getList()
},
onLoad() {
this.listQuery.current += 1
this.getList()
},
getList() {
getSupplierComparisonList(this.listQuery).then(res => {
let ret = res.data;
if (ret && ret.code === 1) {
...
this.loading = false
this.sourceList.push(...ret.data.records)
if (ret.data.records.length < 10) {
this.finished = true
} else {
this.finished = false
}
}
}).catch(error => {
this.error = true
})
}
}
你期待的结果是什么?实际看到的错误信息又是什么?
向下滑动时,数据加载后不要返回顶部
还是我自己回答吧,是因为我没有定义父容器的高度,在
<van-pull-refresh>
标签外套一层高度固定的容器就可以了。