Toast 组件导致 van-list 组件数据加载后置顶问题

Toast 组件导致 van-list 组件数据加载后置顶问题

所在环境：微信公众号网页
UI组件库：Vant
相关组件：vant-list、Toast

问题描述

1. 滑动列表到底部，数据加载后，列表自动跳至顶部
2. 在 onLoad 方法添加 setTime 延迟调用后台接口只能缓解该问题，并不能根本解决

问题分析

1. 百度搜索得到相关问题描述：https://www.cnblogs.com/hyfl847/p/15219041.html
2. 经排查发现 Toast.loading({ forbidClick: true }) 可以禁用背景点击，但同样会导致 van-list 组件滚动高度出现问题
3. 得出结论：由于全局拦截器加载中 Toast.loading({ forbidClick: true }) 导致

问题解决

方法一

Toast.loading({ forbidClick: false }) 将 forbidClick 设置为 false可解决该问题，但同样会导致背景可点击。(不推荐)

方法二

自定义组件：模拟 Toast 组件效果即可

<template>
  <van-popup v-model="appLoading" :close-on-click-overlay="false" :overlay="false">
    <div class="loading-wrap">
      <van-loading color="#fff" />
    </div>
  </van-popup>
</template>

<script>
import { Popup, Loading } from 'vant'

export default {
  components: {
    [Popup.name]: Popup,
    [Loading.name]: Loading
  },
  props: {
    appLoading: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style lang="scss" scoped>
.van-popup {
  background-color: transparent;
  border-radius: 12px;
  overflow: hidden;
}

.loading-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 130px;
  height: 130px;
  background-color: rgba(0, 0, 0, 0.7);
}
</style>