有赞的vant list组件 在向下滑动翻页的时候,加载数据之前会返回顶部。

新手上路,请多包涵

问题描述

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
      })
  }  
}

你期待的结果是什么?实际看到的错误信息又是什么?

向下滑动时,数据加载后不要返回顶部

阅读 11.6k
2 个回答
✓ 已被采纳新手上路,请多包涵

还是我自己回答吧,是因为我没有定义父容器的高度,在<van-pull-refresh>标签外套一层高度固定的容器就可以了。

新手上路,请多包涵

加一个setTimeout,
在onLoad 里面请求后台方法时候加setTimeout,就好了,我截图:
image.png

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏