首页 > 其他分享 >vue3 使用vant4中的List分页加载时,会回滚到页面顶部

vue3 使用vant4中的List分页加载时,会回滚到页面顶部

时间:2024-04-25 10:22:20浏览次数:19  
标签:Toast 回滚 List vue3 加载 页面

问题

项目中使用vue3+vant4,列表页使用了 List 来做列表加载,代码如下:

<van-list
  v-model:loading="loading"
  :finished="finished"
  finished-text="没有更多了"
  @load="onLoad"
>
  <div v-if="list && list.length" class="listCon">
    <div class="item" v-for="(item, index) in list" :key="item">
      {{ item.name }}
    </div>
  </div>
  <div v-else>
    暂无数据
  </div>
</van-list>

以上组件使用到的方法不再罗列,只阐述使用了List组件,产生的问题是:
接口使用分页,上拉加载第二页及后续页面时,h5页面会回滚到顶部

解决

查代码发现,在封装的request组件中,发送请求时展示Toast,请求结束去除Toast,就是这个Toast导致的页面回滚到顶部。

解决方法 暂时时发送请求时判断path是否为列表,是的话不展示Toast。
如果大家有好的方法可以留言奥~~

标签:Toast,回滚,List,vue3,加载,页面
From: https://www.cnblogs.com/ZerlinM/p/18157009

相关文章

  • Vue3——tdesign-vue-next如何按需加载动态渲染ICON
    前言如题,在vue3中进行按需加载来动态的渲染icon图标;在线案例:https://stackblitz.com/edit/9ufmeo?file=src%2Fdemo.vue内容<template><t-spacedirection="vertical"><t-spacebreak-linev-for="(item,index)iniconList":key="index"&......
  • SeqList
    顺序表一、顺序表的结构顺序表的三个条件1)顺序表的地址2)顺序表的容量3)顺序表的下标/****************************************************************************** 顺序表的管理结构体**********************************************************************......
  • java lambda list集合中对象某属性重复,只取第一个对象
    可以使用Java8的流式编程和Lambda表达式来实现这个需求:List<MyObject>list=getList();//获取List集合Map<String,MyObject>map=list.stream().collect(Collectors.toMap(MyObject::getProperty,Function.identity(),(o1,o2)->o1));List<MyObject>r......
  • JDK源码分析-ArrayList
    概述ArrayList是List接口的一个实现类,也是Java中最常用的容器实现类之一,可以把它理解为「可变数组」。Java中的数组初始化时需要指定长度,而且指定后不能改变。ArrayList内部也是一个数组,它对数组的功能做了增强:主要是在容器内元素增加时可以动态扩容,这也是ArrayList的......
  • 记一次new ArrayList导致的cpu飙升问题排查
    参考:https://mp.weixin.qq.com/s/8JDPOAvmKYP8JZxau45hdw前言当时场景正常的jvm监控曲线图产生问题的jvm监控曲线图具体分析结束语昨天线上容器突然cpu飙升,也是第一次排查这种问题所以记录一下~前言首先问题是这样的,周五正在写文档,突然收到了线上报警,发......
  • Python list的交、并、差与排序
    求list的交集、并集、差集set() 函数创建一个无序不重复元素集,通过set可方便求取list的交并差,并可去重#通过set集合>>>list1=[1,2,3]>>>list2=[2,3,4]>>>set1=set(list1)>>>set2=set(list2)>>>set1&set2#交集{2,3}>>>set1|set......
  • HarmonyOS NEXT 实战开发—Grid和List内拖拽交换子组件位置
    介绍本示例分别通过onItemDrop()和onDrop()回调,实现子组件在Grid和List中的子组件位置交换。效果图预览使用说明:拖拽Grid中子组件,到目标Grid子组件位置,进行两者位置互换。拖拽List中子组件,到目标List子组件位置,进行两者位置互换。实现思路在Grid组件中,通过editMode()打......
  • vue3大屏适配
    1、定义初始化比例letstyle=ref({//定义默认比例width:1920,height:1080,transform:"scaleY(1)scaleX(1)translate(-50%,-50%)"})2、获取屏幕的宽高比列对象letgetScale=()=>{//获取屏幕的宽高比列constw=window.innerWidth/style.va......
  • [Vue3+Element-Plus]点击列表中的图片预览时,图片被表格覆盖
    preview-teleported="true" <el-table-columnprop="id"label="ID"width="80"align="center"sortable/><el-table-columnlabel="商品图片"width="85px"><template#default=&q......
  • doublelist_add
    双向链表的插入操作的相关操作1.头部插入/******************************************************************************函数名称: HeadAdd*函数功能:双向链表的头部插入*函数参数:*@a:*He......