精华内容
下载资源
问答
  • vant-List-@load事件一直触发
    2021-11-12 09:53:54

    项目场景:

    今天项目用到vant-List,发现一直触发@load事件。
    这是请求的page和pageSize

    page: 0,
    pageSize: 10,
    

    后端测试数据一共21条,但是进入页面就一下请求了三次,全部加载完数据了,这样就达不到要求了。

    问题描述:

    查看了文档底下的常见问题:

    为什么会连续触发 load 事件?
    如果一次请求加载的数据条数较少,导致列表内容无法铺满当前屏幕,List 会继续触发 load 事件,直到内容铺满屏幕或数据全部加载完成。因此你需要调整每次获取的数据条数,理想情况下每次请求获取的数据条数应能够填满一屏高度。

    看到这个时候我查看了一下代码,10条的数据量是能够填满一屏的,但是还是直接请求完成了。

    往下走:

    在 html、body 上设置 overflow 后一直触发加载?
    如果在 html 和 body 标签上设置了overflow-x: hidden样式,会导致 List 一直触发加载。
    html,
    body {
    overflow-x: hidden;
    }
    这个问题的原因是当元素设置了overflow-x: hidden样式时,该元素的overflow-y会被浏览器设置为auto,而不是默认值visible,导致 List 无法正确地判断滚动容器。解决方法是去除该样式,或者在 html 和 body 标签上添加height: 100%样式。

    原因分析:

    到这里就找到问题的原因了,我习惯在外层盒子加上min-height: 100vh;overflow-x:hidden;没想到会影响这个组件,麻了。

    解决方案:

    去除overflow-x: hidden;或将min-height: 100vh;改为height: 100vh;

    更多相关内容
  • List 列表 瀑布流滚动加载,用于控制长列表的展示 先说使用 1.用npm下载该模块包 npm i vant -S 2.引入组件 官方提供了三种方法。(我使用了第三种,全局引入方法) 方式一. 使用 babel-plugin-import (推荐) ...
  • vant-list + toast分页加载,数据加载后会滚动至顶部

    vant-list + toast分页加载,数据加载后会滚动至顶部
    主要原因是 toast组件在全局添加了 pointer-event:none
    解决办法,在对应的van-list的属性值添加 pointer-event

    .volunteer-list {
        position: relative;
        width: 100%;
        height: 100%;
        background-color: #fff !important;
        pointer-events: auto !important;
        * {
            pointer-events: auto !important;
        }
        .list { /**这里是van-list*/
            position: relative;
            width: 100%;
            height: 100%;
            overflow: auto;
            padding: 10px 14px;
            }
       }
    

    这时候会出现一个新的问题,在toast的loading等待时候,页面依旧可以操作
    解决办法,在toast上添加伪类遮罩层,全局添加css,并阻止鼠标事件穿透

    .van-toast::before {
        content: '';
        display: block;
        position: fixed;
        z-index: 9999;
        width: 100vw;
        height: 100vh;
        pointer-events: visiblestroke;
    }
    
    展开全文
  • 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 @load加载问题

    2022-01-05 16:49:45
    vant-list @load加载 不断请求接口问题个人解决方案 在vant-list 标签中配置offset属性,默认值300太大了(建议在30左右) ; 有配置van-pull-refresh使用的, 在vant-list 中 设置 :immediate-check="false" 设定...

    vant-list @load加载 不断请求接口问题个人解决方案

    1. 在vant-list 标签中配置offset属性,默认值300太大了(建议在30左右)
    2. 有配置van-pull-refresh使用的, 在vant-list 中 设置 :immediate-check="false"
    3. 设定一个变量,例如:isLoad,在每次请求方法时拦截多余的请求
    async pageMore() {
                    if (!this.isLoad) {
                        this.isLoad = true;
                        this.loadStart();
                        await this.$postData("xxx", this.queryParam, {}).then((res) => {
                            if (res.status === 200) {
                                res.data.records.forEach(v => {
                                    this.dataList.push(v);
                                });
                                const list = res.data.records;
                                if (list === null || list.length === 0 ||
                                    this.queryParam.size * this.queryParam.current >= res.data.total
                                    || this.dataList.length >= res.data.total) {
                                    this.finished = true;
                                }
                                this.queryParam.current++;
                            } else {
                                this.$toast.fail(res.msg);
                            }
                        }).catch(e => {
                            this.$toast.fail(e.message);
                        }).finally(() => {
                            // this.refreshing = false;
                            this.loadEnd();
                            this.isLoad = false;
                        });
                    }
                }
    

    目前没找到和想到更好的方案,有哪位朋友有更好的方案,请评论区说一下哈。

    展开全文
  • vant-list使用

    2021-06-10 11:54:15
    van-list v-model="loading" // 是否显示正在加载状态 :finished="finished" // 是否已经加载完成 finished-text="没有更多了" // 加载完成提示文案 @load="onLoad" // 滚动条与...
    <van-list 
    	v-model="loading" 	                     		 // 是否显示正在加载状态
    	:finished="finished" 							 // 是否已经加载完成
    	finished-text="没有更多了"						 // 加载完成提示文案
    	@load="onLoad" 									 // 滚动条与底部距离offset时触发事件
    	offset="300"									 // 滚动条与底部距离offset时触发@load(默认300)
    	:error.sync="error" 							 // 是否显示加载失败状态
    	error-text="请求失败,点击重新加载"					 // 加载失败提示文案
    	>
    	// 循环列表数据
       <div v-for='(item, index) in list' :key="index"> 
       		<div>{{item}}循环出来的数据<div>
       </div>
     </van-list>  
    

    data声明

    data() {
    	return {
    	  loading: false, 		// 是否处在加载状态
          finished: false, 		// 是否已加载完成
          error: false, 		// 是否加载失败
          list: [],				// 列表
          page: 1,				// 分页
          page_size: 10			// 每页条数
          total: 0				// 数据总条数
    	}
    }
    

     methods定义方法:

    methods: {
    	// 获取列表数据方法
        async getList() {
          let { data: res } = await informList({ 
              page: this.page,
              page_size: this.page_size,
          })
          if (res.length === 0) {  		// 判断获取数据条数若等于0
            this.list = [];				// 清空数组
            this.finished = true;		// 停止加载
          }
          // 若数据条数不等于0
          this.total = res.total;		// 给数据条数赋值
          this.list.push(...res.list)	// 将数据放入list中
          this.loading = false;			// 加载状态结束 
          // 如果list长度大于等于总数据条数,数据全部加载完成
          if (this.list.length >= res.total) {
              this.finished = true;		// 结束加载状态
          }
        },
    	// 被 @load调用的方法
        onLoad() { // 若加载条到了底部
          let timer = setTimeout(() => {	// 定时器仅针对本地数据渲染动画效果,项目中axios请求不需要定时器
            this.getList();					// 调用上面方法,请求数据
            this.page++;					// 分页数加一
            this.finished && clearTimeout(timer);//清除计时器
          }, 100);
        },
    	// 加载失败调用方法
        onRefresh() {
          this.finished = false; 		// 清空列表数据
          this.loading = true; 			// 将 loading 设置为 true,表示处于加载状态
          this.page = 1;				// 分页数赋值为1
          this.list = [];				// 清空数组
          this.onLoad(); 				// 重新加载数据
        }
      }
    

    this.getList()不能再mouthed里调用,否则数据会多

    展开全文
  • vant vant-list碰到的坑

    千次阅读 2020-04-27 12:42:39
    vant vant-list碰到的坑 最近新写的项目都是碰见了这个问题 onload在加载时只触发一次,还是在刚进页面是触发一次,页面向下滚动时,onload并不加载 (本人所尝试的解决方案) 我在data里定义loading为false,但是...
  • 首先 van-list 是首次进就会触发加载的,滚动条滑倒底部不会再触发 一般是因为外部高度未固定导致拿不到滚动条位置 <template> <div class="listClass" ref="listout"> <van-list v-model=...
  • vant-list一直显示loading框

    千次阅读 2020-04-27 15:13:43
    网上的问题多是页面一直loading数据,而我的问题却是加载完之后还是显示“正在加载…” 问题根源: ...(父组件给vant-list组件通过v-bind的方式传递值,vant-list通过pops接收,为了防止vant-list...
  • 关于Vant-list 上拉加载以及下拉刷新问题第一步引入vueimport { Notify, Dialog, Image, List, PullRefresh } from 'vant'import Vue from 'vue'Vue.use(Image).use(List).use(PullRefresh)第二步web第三步ajaxdata ...
  • vue 3.0 typescript vant. 1.单个界面刷新没问题:排除组件初始化调用问题 2.主界面滚动条在顶部则不会影响,当主界面下拉时,滚动条位置会影响子界面。 3.问题: 主界面滚动条会影响子界面滚动条 1.跳转前滚动条...
  • 需要给van-list增加 :immediate-check=“false” 属性,不要让他首次加载,然后在 created() {} 里面进行首次加载(这样可以放置首次加载出现多次加载的情况) 异步获取到数据后,需要给在元数据的基础上增加数据,...
  • List 组件通过loading和 finished两个变量控制加载状态,当组件滚动到底部时,会触发 load事件并将loading 设置成true。此时可以发起异步操作并更新数据,数据更新完毕后,将 loading 设置成 false 即可。若数据已...
  • export default{data(){return {list:[],page:0,//分页总数number:0,//分页数loading:false,//控制载入动画finished:false,//是否再执行 onLoad方法isLoading:false,//控制下拉重新载入}},methods:{init(){let self ...
  • 常见问题List 的运行机制是什么?List 会监听浏览器的滚动事件并计算列表的位置,当列表底部与可视区域的距离小于offset时,List 会触发一次 load 事件。为什么 List 初始化后会立即触发 load 事件?List 初始化后会...
  • vant-list加上tab之后分页异常

    千次阅读 2019-06-19 14:47:33
    忍不住要来写一下vant-list分页之后的加载问题 想破脑袋也不知道为什么带有切换tab的list组件,每次会自动加载load事件 问题大概就是:将一个页面拉到底,切换tab之后会自动加载load事件 问题解决:在tab切换的时候...
  • vant-list onload在切换 tab 或者 搜索 不会触发的坑 首先要知道onload是根据loading和finished的状态来判定onload函数是否执行,如果我们将loading的初始状态设置为false,在页面加载的时候就会触发onload事件,所以...
  • Vant---vantlist列表组件详解与使用

    千次阅读 2022-02-14 15:34:52
    van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" > <van-cell v-for="item in list" :key="item.id" :title="item.title" /> </van-list> </...
  • vant-list上拉加载下拉刷新

    千次阅读 2021-01-27 10:29:31
    vant-list官网示例 ,vant-list各参数释义如下: 效果如图: <template> <van-list v-if="listData.length > 0" v-model="loading" :finished="finished" :immediate-check="false" ...
  • List有以下三种状态,理解这些状态有助于你正确地使用List组件: 非加载中,loading为false,此时会根据列表滚动位置判断是否触发onload事件(列表内容不足一屏幕时,会直接触发) 加载中,loading为true,表示正在...
  • Vant-list源码详解

    千次阅读 2018-10-11 12:46:41
    一、源码理解基础之scroll.js 1、1 >>>  getScrollEventTarget ...export default { ...https://github.com/youzan/vant/tree/dev/packages/list 、 https://github.com/youzan/vant/tree/dev/packages/utils
  • vant--List列表使用

    千次阅读 2021-01-11 11:47:50
    记录使用vantlist的下拉刷新以及分页功能 vant链接. 首先是分页,需要根据page,limit来获取数据,使用vant的代码做示范: <van-pull-refresh v-model="refreshing" @refresh="onRefresh"> <van-list v-...
  • vant-list上拉加载onload事件触发多次

    千次阅读 2020-10-14 17:32:19
    在.then之前,异步查询还未返回的时候,又会去触发onload事件,在current+=1之后再次进行查询) 用到的知识: 一、基础用法: List 组件通过 loading 和 finished 两个变量控制加载状态,当组件滚动到底部时,会触发...
  • components 下拉刷新 、上拉加载、首屏骨架、空状态 封装组件 mixin 共同点抽离 ###### load-list.js import {_PAGE__COUNT, ERR_OK} from "@/config"; // 上拉加载 export default { data () { return { page: 1, /...
  • vant-ui list使用方式

    2022-01-25 09:02:56
    vant-ui list使用方式
  • vant-ui的list

    2021-02-04 16:22:08
    一,实现的效果 二,实现的思路 <van-tabs v-model="active" line-width="33%"> <van-tab title="全部"> <van-list v-model="loading_1" :finished="finished_1" offset="20
  • ![图片说明](https://img-ask.csdn.net/upload/202003/20/1584674339_47023.png) 使用vant-list做的上拉刷新,怎么改变这里的 “加载中”。
  • 移动端项目 vue+vant-ui List 使用 【小坑】van-pull-refresh+list van-pull-refresh+list 今天用vue+vant项目做优化数据工作,使用了van-pull-refresh+list做上拉加载+下拉刷新 本来高高兴兴,结果发现鼠标滚轮已...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,433
精华内容 1,773
关键字:

vant-list

友情链接: DCDC_converter.zip