vant-list加上tab之后分页异常

最新推荐文章于 2024-06-26 10:41:13 发布
最新推荐文章于 2024-06-26 10:41:13 发布
阅读量2.5k 收藏 1
点赞数 1
分类专栏： vue 文章标签： vant-list 上拉加载
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Tina_xubin/article/details/92831069
版权

忍不住要来写一下vant-list分页之后的加载问题
想破脑袋也不知道为什么带有切换tab的list组件，每次会自动加载load事件
问题大概就是：将一个页面拉到底，切换tab之后会自动加载load事件
问题解决：在tab切换的时候给他一个初始化吧，
在这里插入图片描述

Tina_xubin
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
vue vantUI tab切换时 list组件不触发load事件的问题及解决方法
10-15
主要介绍了vue vantUI tab切换时 list组件不触发load事件的解决办法,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
h5使用vant分页,van-list,没有使用分页器Pagination,
weixin_48557454的博客
01-25 1386
vue3使用vant4的列表vant-list点击进入详情自动滚动到对应位置，踩坑日记（一天半的踩坑经历）
最新发布
weixin_44705979的博客
06-26 748
【代码】vue3使用vant4的列表vant-list点击进入详情自动滚动到对应位置，踩坑日记（一天半的踩坑经历）
vant tab+列表+下拉刷新
m0_53311545的博客
08-18 523
我的订单 <template> <section id="my_order" selected="true" params="{}"> <ul id="order_type" class="order_type disflex"> <li class="boxflex" :class="{'on':status==0}" @click="changeStatus(0)"><span>{{ statusText[0] }}&l
使用vant组件中van-tabs、van-pull-refresh和van-list时，切换tabs标签，列表重复加载问题。
xieyizi95的博客
05-25 6763
使用vant组件中van-tabs、van-pull-refresh和van-list时，切换tabs标签，列表重复加载问题 问题现象：tabs切换时，如果之前的tab已经滚动到底部，直接点击其他的tab，将再触发一次onload事件。 问题原因：这种情况下，切换tab会导致触发两次请求数据的方法，一次是监听tab切换事件执行的，另一次是由于之前一个tab已经滚动到底部触发的onload事件。 解决措施：设置一个全局变量tabchange，监听到tab切换事件时设置tabchange为true，在onloa
有赞vant-ui Tabs、List、PullRefresh组件实践
weixin_34128501的博客
08-21 2400
Vant ui + Vue.js 部分组件实践 功能需求是实现一个移动端的栏目列表切换，于此同时列表需要进行下拉刷新，上拉加载 如下图，大概是一个这样的东西 看起来是挺简单的，实现起来很方便。没错，我当时也是这么想的，结果满心欢喜就开始在前一个前端写好的的vantui 基本结构下开始编写代码。 代码如下,当然这是我已经修改过的代码。...
Vant-Aliapp：支付宝小程序版本Vant组件库
02-26
Vant Aliapp是移动端Vue组件库的支付宝小程序版本，两者基于相同的视觉规范，提供一致的API接口，助力开发者快速构建小程序应用。 Vant Aliapp通过小程序转换器基于转换得到，并进行了少量的兼容适配调整。 预览 ...
vant-ui框架的一个bug(解决切换后onload不触发)
01-22
List 列表 瀑布流滚动加载，用于控制长列表的展示 先说使用 1.用npm下载该模块包 npm i vant -S 2.引入组件 官方提供了三种方法。（我使用了第三种，全局引入方法） 方式一. 使用 babel-plugin-import (推荐) ...
vant-mall-tpl:vant-ui商城模板
05-15
"vant-mall-tpl:vant-ui商城模板" 是一个基于Vant UI的电子商务网站模板，专为快速构建前端商场界面而设计。这个模板利用了Vant UI组件库，提供了丰富的UI元素和交互设计，帮助开发者高效地搭建功能完备、美观的...
vant 中van-list的用法说明
01-18
van-list里面的元素不能有float样式，否则会连续触发 load 事件 原代码 <van v-model=active change=getTypeDate> <van v-for=(tab) title=tab.name key=tab.id> <div xss=removed class=pic-content> <...
vant-list onLoad触发问题以及tab切换
weixin_57545032的博客
12-12 774
vant-list onLoad触发问题以及tab切换
Vant Tab标签页+下拉刷新+上拉加载
weixin_45774919的博客
11-23 1448
Vant Tab标签页+下拉刷新+上拉加载 安装v-viewer npm install v-viewer --save 在main.js当中加入以下代码 vue代码块 <template> <div class="invoicePickupBox"> <div class="headerBox"> <div class="backBox"> <div class="backIcon" @click="goBac
vant-list和vant-tab组合使用触发load无限加载
qq_43378083的博客
11-18 2659
tab中不同页的数据用同一个数组时，不要一次性请求好数据后放数组里面，然后tab切换的时候本地去判断处理，这样如果一个tab页中没有数据，或者数据没有铺满屏幕时，vant-list的load事件会一直去请求接口拿数据，知道屏幕铺满为止。不同的tab页的数据可以放一个数组中，但是每次切换不同tab都要去重新请求接口，拿到不同的值去赋予数组，不要把所有tab的数据拿到后本地处理！
vant-list上滑加载，数据重复，加载后返回顶部，或者不加载更多数据
qq_42440919的博客
11-17 3692
list上拉加载
vant组件list上拉刷新加载的问题
m0_46577631的博客
09-17 2024
vant组件list的一些问题
vant-ui框架 tab切换list不加载问题（切换后onload不触发）
Wangdr的博客
05-09 7538
遇到的问题：项目里，加载的list，页面上有个切换的tab,实现切换不同的类型，加载不同的list的功能。vant-ui的list就有个bug，当切换tab的时候，它的onload没方法自动触发。然而在当前标签页，如果列表已经加载完毕再去切换，onload就可以实现自动触发 解决办法： tab(i,en){ this.num=i; this.type=en; this.evaluate_list=[];//清空list列表 this.noData=false;//展示列表
VUE—van-tab切换不同样式的组件 使用v-if 解决闪动问题以及分页问题（吐血踩坑）
Poppy_LYT的博客
08-25 2777
<template> <div class="content-wrap"> <van-tabs v-model="tabId" @change="changeTab"> <van-tab title="tab1" /> <van-tab title="tab2" /> <van-tab title="tab3" /> </van-tabs> <van-li
vant ui 上拉加载分页及tab切换遇到的坑
盼盼大小姐的博客
09-29 969
vant ui 上拉加载分页及tab切换遇到的坑
vant vant-tab存在滚动
07-29
4. 检查是否在"vant-tab"组件的父容器中包含了其他可能引起滚动的组件或元素，如"vant-list"等，逐一检查它们的样式和属性，确保不会出现冲突。 希望以上建议能够帮到你！如果还有其他问题，欢迎继续提问。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值