精华内容
下载资源
问答
  • vant vant-list碰到的坑

    千次阅读 2020-04-27 12:42:39
    vant vant-list碰到的坑 最近新写的项目都是碰见了这个问题 onload在加载时只触发一次,还是在刚进页面是触发一次,页面向下滚动时,onload并不加载 (本人所尝试的解决方案) 我在data里定义loading为false,但是...

    vant vant-list碰到的坑

    最近新写的项目都是碰见了这个问题 onload在加载时只触发一次,还是在刚进页面是触发一次,页面向下滚动时,onload并不加载
    (本人所尝试的解决方案)

    在这里插入图片描述
    我在data里定义loading为false,但是在触发加载时这个并不执行,所以我在请求数据里又定义一遍loading为false

    在这里插入图片描述
    在这里插入图片描述
    在onload里触发加载更多数据
    在这里插入图片描述

    在这里插入图片描述
    在mounted里加载数据
    在这里插入图片描述

    展开全文
  • import { List } from 'vant';Vue.use(List);代码演示基础用法List 组件通过loading和finished两个变量控制加载状态,当组件滚动到底部时,会触发load事件并将loading设置成true。此时可以发起异步操作...

    介绍

    瀑布流滚动加载,用于展示长列表,当列表即将滚动到底部时,会触发事件并加载更多列表项。

    引入import Vue from 'vue';

    import { List } from 'vant';

    Vue.use(List);

    代码演示

    基础用法

    List 组件通过loading和finished两个变量控制加载状态,当组件滚动到底部时,会触发load事件并将loading设置成true。此时可以发起异步操作并更新数据,数据更新完毕后,将loading设置成false即可。若数据已全部加载完毕,则直接将finished设置成true即可。

    v-model="loading"

    :finished="finished"

    finished-text="没有更多了"

    @load="onLoad"

    >

    export default {

    data() {

    return {

    list: [],

    loading: false,

    finished: false

    };

    },

    methods: {

    onLoad() {

    // 异步更新数据

    // setTimeout 仅做示例,真实场景中一般为 ajax 请求

    setTimeout(() => {

    for (let i = 0; i < 10; i++) {

    this.list.push(this.list.length + 1);

    }

    // 加载状态结束

    this.loading = false;

    // 数据全部加载完成

    if (this.list.length >= 40) {

    this.finished = true;

    }

    }, 1000);

    }

    }

    }

    错误提示

    若列表数据加载失败,将error设置成true即可显示错误提示,用户点击错误提示后会重新触发 load 事件。

    v-model="loading"

    :error.sync="error"

    error-text="请求失败,点击重新加载"

    @load="onLoad"

    >

    export default {

    data() {

    return {

    list: [],

    error: false,

    loading: false

    };

    },

    methods: {

    onLoad() {

    fetchSomeThing().catch(() => {

    this.error = true;

    })

    }

    }

    }

    下拉刷新

    List 组件可以与 PullRefresh 组件结合使用,实现下拉刷新的效果

    v-model="loading"

    :finished="finished"

    finished-text="没有更多了"

    @load="onLoad"

    >

    export default {

    data() {

    return {

    list: [],

    loading: false,

    finished: false,

    refreshing: false

    };

    },

    methods: {

    onLoad() {

    setTimeout(() => {

    if (this.refreshing) {

    this.list = [];

    this.refreshing = false;

    }

    for (let i = 0; i < 10; i++) {

    this.list.push(this.list.length + 1);

    }

    this.loading = false;

    if (this.list.length >= 40) {

    this.finished = true;

    }

    }, 1000);

    },

    onRefresh() {

    // 清空列表数据

    this.finished = false;

    // 重新加载数据

    // 将 loading 设置为 true,表示处于加载状态

    this.loading = true;

    this.onLoad();

    }

    }

    }

    API

    Props参数说明类型默认值v-model是否处于加载状态,加载过程中不触发load事件booleanfalse

    finished是否已加载完成,加载完成后不再触发load事件booleanfalse

    error是否加载失败,加载失败后点击错误提示可以重新

    触发load事件,必须使用sync修饰符booleanfalse

    offset滚动条与底部距离小于 offset 时触发load事件number | string300

    loading-text加载过程中的提示文案string加载中...

    finished-text加载完成后的提示文案string-

    error-text加载失败后的提示文案string-

    immediate-check是否在初始化时立即执行滚动位置检查booleantrue

    direction滚动触发加载的方向,可选值为upstringdown

    Events事件名说明回调参数load滚动条与底部距离小于 offset 时触发-

    方法

    通过 ref 可以获取到 List 实例并调用实例方法,详见 组件实例方法方法名说明参数返回值check检查当前的滚动位置,若已滚动至底部,则会触发 load 事件--

    Slots名称说明default列表内容

    loading自定义底部加载中提示

    finished自定义加载完成后的提示文案

    error自定义加载失败后的提示文案

    常见问题

    List 的运行机制是什么?

    List 会监听浏览器的滚动事件并计算列表的位置,当列表底部与可视区域的距离小于offset时,List 会触发一次 load 事件。

    为什么 List 初始化后会立即触发 load 事件?

    List 初始化后会触发一次 load 事件,用于加载第一屏的数据,这个特性可以通过immediate-check属性关闭。

    为什么会连续触发 load 事件?

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

    loading 和 finished 分别是什么含义?

    List有以下三种状态,理解这些状态有助于你正确地使用List组件:非加载中,loading为false,此时会根据列表滚动位置判断是否触发load事件(列表内容不足一屏幕时,会直接触发)

    加载中,loading为true,表示正在发送异步请求,此时不会触发load事件

    加载完成,finished为true,此时不会触发load事件

    在每次请求完毕后,需要手动将loading设置为false,表示加载结束

    使用 float 布局后一直触发加载?

    若 List 的内容使用了 float 布局,可以在容器上添加van-clearfix类名来清除浮动,使得 List 能正确判断元素位置

    在 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%样式。

    展开全文
  • vant list 组件总结

    2020-04-05 17:42:29
    list组件注意事项 1 接口调用失败,会循环调用接口,解决办法加载失败需要处理 2 list请求一次要一满屏,不然会接着调用 3 接口请求反回停止的条件 1》加载失败 2》数据加载完成,再没有了 3》调用一次数据...

    list组件注意事项

    1 接口调用失败,会循环调用接口,解决办法加载失败需要处理

    2 list请求一次要一满屏,不然会接着调用

    3 接口请求反回停止的条件

       1》加载失败

       2》数据加载完成,再没有了

       3》调用一次数据铺满全屏

    个人建议不使用初始化时立即执行滚动位置检查 immediate-check,因为只要接口出现问题,会导致死循环加载数据

     

     isLoading: false,     //下拉刷新
     listLoading: false,//list加载
     finished: false,//没有数据
     pullText:'刷新成功',//刷新成功文案
     listText:'没有数据了',//list加载完所以数据文案
     listErr:false,//加载失败
     listErrText:'数据加载失败',//加载失败提示文案
    
     <van-list
                    v-model="listLoading"
                    :finished="finished"
                    :finished-text="listText"
                    :error.sync="listErr"
                    :error-text="listErrText"
                    @load="getData">

     

    展开全文
  • vant List 懒加载

    千次阅读 2020-01-09 14:13:21
    const list = (json.data.value && json.data.value.datalist) || [] if (this.page > 1) { this.dateList = [...this.dateList, ...list] } else { ...
    	const list = (json.data.value && json.data.value.datalist) || []
    	if (this.page > 1) {
    	  this.dateList = [...this.dateList, ...list]
    	} else {
    	  this.dateList = list
    	}
    	// 如果当前页数 = 总页数,则已经没有数据
    	if (json.data.value.page === Math.ceil(json.data.value.items / 10)) {
    	  this.finished = true
    	}
    	// 如果总页数大于当前页码,页码+1
    	if (Math.ceil(json.data.value.items / 10) > this.page) {
    	  this.page++
    	}
    	this.loading = false
    
    展开全文
  • 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一直显示loading框

    千次阅读 2020-04-27 15:13:43
    网上的问题多是页面一直loading数据,而我的问题却是加载完之后还是显示“正在加载…” 问题根源: ...(父组件给vant-list组件通过v-bind的方式传递值,vant-list通过pops接收,为了防止vant-list...
  • 在看留言加关注,技术路上不迷路"开箱即用,让开发变得更简单“github:https://github.com/sunniejs/vue-h5-template作者:花花小仙女基于 vue-cli4.0+webpack 4+vant ui + sass+ rem 适配方案+axios 封装,构建...
  • Vue + Vant List 列表()

    千次阅读 2020-11-06 10:17:09
    Vant List 列表 介绍 瀑布流滚动加载,用于展示长列表,当列表即将滚动到底部时,会触发事件并加载更多列表项。 引入 import Vue from 'vue'; import { List } from 'vant'; Vue.use(List); 代码演示 基础...
  • 第一步使用vant-list <van-list v-model="loading" :finished="finished" :finished-text="title" :offset="50" :immediate-check="false" @load="onLoad" > <div class="totay_title" v-for="item...
  • ![图片说明](https://img-ask.csdn.net/upload/202003/20/1584674339_47023.png) 使用vant-list做的上拉刷新,怎么改变这里的 “加载中”。
  • vant当中van-list的使用

    万次阅读 2019-06-28 18:15:45
    van-list里面的元素不能又float样式,否则会连续触发 load 事件 原代码 <template> <div class="about"> <van-tabs v-model="active" sticky @change="getTypeDate"> <van-tab v-for="(tab)...
  • vant-list官网示例 ,vant-list各参数释义如下: 效果如图: <template> <van-list v-if="listData.length > 0" v-model="loading" :finished="finished" :immediate-check="false" ...
  • 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
  • 蘑菇街移动端项目,使用vant框架中的list组件还有tab组件,完成了tabbar-control组件 ![tab栏切换](https://img-blog.csdnimg.cn/20200923235804481.png#pic_center) 问题描述: 提示:这里描述项目中遇到的问题:...
  • 关于Vant-list 上拉加载以及下拉刷新问题第一步引入vueimport { Notify, Dialog, Image, List, PullRefresh } from 'vant'import Vue from 'vue'Vue.use(Image).use(List).use(PullRefresh)第二步web第三步ajaxdata ...
  • 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加载 empty空状态

    千次阅读 2020-07-22 10:13:08
    data(){ return{ pageSize: 8, // 默认每次显示8条数据,还有的数据根据滚动加载 }} // 获取所有数据 getList(current, size, params) { getComList( Object.assign( { ...this.list = res.data....
  • vant tab list 下拉刷新及分页加载数据问题
  • vant list immediate-check设置

    千次阅读 2020-06-09 10:17:22
    每次更新列表,列表从底部弹出,不希望默认进入加载 首先设置了immediate-check为false 第一次更新列表没有问题,onload方法走了一次,但是第二次更新列表时,onload方法走了两次。。。,把loading 置为true 问题...
  • 关于Vant-list 上拉加载以及下拉刷新问题第一步引入import { Notify, Dialog, Image, List, PullRefresh } from 'vant'import Vue from 'vue'Vue.use(Image).use(List).use(PullRefresh)第二步第三步data () {return...
  • vant组件库之van-list

    千次阅读 2019-12-08 15:14:39
    按照vant官网引入 <template> /* 如果初始化不加载,就要设置默认不检查滚动条位置*/ <van-list v-model="loading" :finished="finished" finished-text="没有更多了" :immediate-check="false" @load=...
  • vant-list加上tab之后分页异常

    千次阅读 2019-06-19 14:47:33
    忍不住要来写一下vant-list分页之后的加载问题 想破脑袋也不知道为什么带有切换tab的list组件,每次会自动加载load事件 问题大概就是:将一个页面拉到底,切换tab之后会自动加载load事件 问题解决:在tab切换的时候...
  • 在做移动端的页面,难免会遇到列表的懒加载,下面是使用Vue和vant实现的List组件懒加载功能,但是根据每个人传递的参数不同可能方法也会不同,仅供大家参考。 <template> <div class="message-list-info...
  • 1.html代码```v-model="listLoading":finished="listFinished"finished-text="没有更多了"@load="requestOrderList"> {{item.saName}}¥{{item.monetary}}档口名称:{{item.place}}档口类型:{{item.type}}{...
  • van-list里面的元素不能有float样式,否则会连续触发 load 事件 原代码 (tab) title=tab.name key=tab.id> <van-list :finished
  • 最近在使用的 Vant (轻量、可靠的移动端 Vue 组件库),实现起来就非常方便。模板实现代码v-model="loading":finished="finished"finished-text="暂无更多数据"@load="load_more_items">v-for="item in items":key...
  • 最近在使用的 Vant (轻量、可靠的移动端 Vue 组件库),实现起来就非常方便。模板实现代码v-model="loading":finished="finished"finished-text="暂无更多数据"@load="load_more_items">v-for="item in items":key...
  • Vant 是有赞前端团队开源的移动端组件库,于 2017 年开源,已持续维护 4 年时间。Vant 对内承载了有赞所有核心业务,对外服务十多万开发者,是业界主流的移动端组件库之一。 特性 提供 60 多个高质量组件,覆盖...

空空如也

空空如也

1 2 3 4 5 ... 19
收藏数 366
精华内容 146
关键字:

listvant