精华内容
下载资源
问答
  • van-list里面的元素不能有float样式,否则会连续触发 load 事件 原代码 (tab) title=tab.name key=tab.id> <van-list :finished
  • 用到了vantUI List 列表 瀑布流滚动加载,用于控制长列表的展示 当列表即将滚动到底部时,会触发事件并加载更多列表项。 (页面加载完成后默认会自动加载一次,可以:immediate-check="false" 这样设置一下,页面加载...
  • vant list 分页问题

    2021-12-07 15:15:27
    vant list 分页问题是项目中基本都会遇到的,但是还是记录一下吧,万一哪天脑袋短路不会写了怎么办(略略略~~) // listvant按需引入的组件 // demand-accept-list 是自定义列表组件(分页写到组件外面) // ...

    vant list 分页问题是项目中基本都会遇到的,但是还是记录一下吧,万一哪天脑袋短路不会写了怎么办(略略略~~)

    	// list 是vant按需引入的组件 
    	// demand-accept-list 是自定义列表组件(分页写到组件外面)
    	// null-data  自定义空数据页面(有需要的自己画界面吧)
    	<list   
          v-model="loading"
          :finished="finished"
          :finished-text="showEmpty ? '' : '没有更多了'"
          :immediate-check="false"
          @load="onLoad"
        >
          <demand-accept-list :list="acceptList" :tab-index="tabIndex" />
        </list>
    
        <null-data v-if="showEmpty" msg="暂无信息" />
    
       selectDemandMyList() {
          this.showEmpty = false;
          // apiVolunteerWebDemandList 这个是我的请求接口(按照自己的接口写吧)
          apiVolunteerWebDemandList(this.dataForm).then(data => {
            console.log(data, '数acceptList据');
            this.loading = false;
            let length = 0;
            if (data.content) {
              length = data.content.length;
            } else {
              this.finished = true;
              this.showEmpty = true;
            }
            if (length) {
              this.acceptList = this.acceptList.concat(data.content);
              if (length < this.dataForm.pageSize) {
                this.finished = true;
              } else {
                this.dataForm.pageNow++;
              }
            } else {
              this.finished = true;
              if (this.dataForm.pageNow === 1) {
                this.showEmpty = true;
              }
            }
          });
        },
    
    
    展开全文
  • Vant List 列表

    千次阅读 2020-12-19 14:13:34
    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%样式。

    展开全文
  • components 下拉刷新 、上拉加载、首屏骨架、空状态 封装组件 mixin 共同点抽离 ###### load-list.js import {_PAGE__COUNT, ERR_OK} from "@/config"; // 上拉加载 export default { data () { return { page: 1, /...

    components 下拉刷新 、上拉加载、首屏骨架、空状态 封装组件

    <template>
      <!--
       * @FileDescription: 该文件的描述信息
       * @author Sun Yan
       * @Date $
      -->
      <van-pull-refresh v-model="$$parent.refreshing"
                        :style="`min-height: ${refreshMinHeight}`"
                        loosing-text="释放刷新"
                        pulling-text="下拉刷新"
                        loading-text="努力加载中"
                        :success-text="$$parent.endSuccessText"
                        success-duration="500"
                        :disabled="!refresh"
                        @refresh="$$parent.onRefreshInitList">
        <van-list
            v-if="($$parent[listName] || []).length"
            v-model="$$parent.loading"
            :finished="$$parent.finished"
            :finished-text="finishedText"
            :error.sync="$$parent.error"
            :error-text="errorText"
            @load="$$parent[onLoadName]"
            :immediate-check="false">
          <slot></slot>
        </van-list>
        <van-empty v-else-if="$$parent.finished" type="list" :description="description"/>
        <div style="padding-top: 11px" v-else-if="!$$parent.finished">
          <van-skeleton avatar :row="4" v-for="i in 6" :key="i"/>
        </div>
      </van-pull-refresh>
    
    </template>
    <script>/**
     * @description: 方法描述
     * @param {参数类型} 参数名称
     * @param {参数类型} 参数名称
     * @return void
     */
    export default {
      name: "com-load-list",
    
      created() {
        this.$$parent = {};
        this.parentVm(this);
      },
      methods: {
    
        parentVm(VmComponent) {
          try {
            if(typeof VmComponent.$parent.onLoad === 'function'
                && Object.prototype.toString.call( VmComponent.$parent.loading ) === '[object Boolean]'
                && Object.prototype.toString.call( VmComponent.$parent.finished ) === '[object Boolean]'
                && Object.prototype.toString.call( VmComponent.$parent[this.listName] ) === '[object Array]') {
               this.$$parent = VmComponent.$parent;
            } else {
              this.parentVm(VmComponent.$parent)
            }
          } catch (e) {
            throw new Error('找不到 目标 VmComponent.$parent 该父组件必须具备 onLoad 方法 并且结合 list_page 乱混使用')
          }
        },
      },
    
      props: {
        refresh: {
          type: Boolean,
          default: false,
        },
    
        refreshMinHeight: {
          type: String,
          default: function () {
            return this.refresh ? 'calc(100vh - 100px)' : '50vh'
          },
        },
    
        listName: {
          type: String,
          default: 'list',
        },
        onLoadName: {
          type: String,
          default: 'onLoad',
        },
        description: {
          type: String,
          default: '暂无数据列表',
        },
        errorText: {
          type: String,
          default: '请求失败,点击重新加载',
        },
        finishedText: {
          type: String,
          default: '没有更多了',
        }
      },
    }
    </script>
    <style scoped>
    
    </style>
    

    mixin 共同点抽离

    ###### load-list.js
    import {_PAGE__COUNT, ERR_OK} from "@/config";
    // 上拉加载
    export default {
      data () {
        return {
          page: 1, // page码
          pageSize: _PAGE__COUNT, // 请求条数
          rowcount: 0, // 最大数
          list: [], // view 渲染列表 通用化 list 注意page命名
          loading: false,      // 上拉加载
          finished: false,      // 加载完毕
          refreshing: false,      // 下拉刷新
          endSuccessText: '刷新成功', // 成功 失败
          error: false, // 请求结果错误
        }
      },
    
      methods: {
        onRefreshInitList() {
          this.page = 1;
          this.error = false;
          this.onLoad();
        },
        // 请求下拉加载 结束 处理项
        onEndLoad (res, resListName, cb) {
          this.loading = false;
          if (res.errorCode === ERR_OK && res.datedec) {
            this.rowcount = res.datedec.rowcount || 0;
            // 请求第一页 结束 清除 加载中ui  mixins 【 loadingState 】组合使用
            typeof this.rmLoading === "function" && this.rmLoading();
    
            // 列表数据 读取 回调处理 返回结果 or 使用name 主动读取 or 没有name 这层结构 问题拦截处理。。
            let newsList =  [];
            if(typeof cb === "function") {
              newsList = cb()
            } else if(resListName) {
              newsList = res.datedec[resListName]
            } else {
              //....
            }
    
            // 第一页 代表着初始状态
            if(this.page === 1 ) {
              this.list = []
              this.finished = false;
              this.refreshing = false;
              this.endSuccessText = '刷新成功'
            }
    
            this.list = [...this.list, ...newsList]
    
            //没有更多
            if(this.rowcount === 0 || this.list.length === this.rowcount || newsList.length !== this.pageSize) {
              this.finished = true;
              this.page !== 1 && this.$toast('已经到底了,没有更多~');
            } else {
              this.page++;
            }
            newsList = null
    
          } else {
            // 请求结果错误
            this.refreshing = false;
            this.error = true;
            this.endSuccessText = '刷新失败,请重新尝试'
          }
        }
      }
    }
    
    
    
    ######## loading.js
    export default {
      data() {
        return {
          toastLoading: '',
        }
      },
    
      //离开页面 移除加载中
      beforeDestroy() {
       this.rmLoading('none')
      },
    
      //离开页面 移除加载中
      deactivated() {
        this.rmLoading('none')
      },
    
      methods: {
        // 添加加载中
        async addLoading(message = '加载中..') {
          await this.rmLoading('none')
          this.toastLoading = this.$toast.loading({
            message,
            duration: 0
          })
        },
    
        // 移除加载中
        async rmLoading(type = 'time') {
          if(type === 'time') await window.setTimeout(() => {}, 800);
          if (this.toastLoading !== '') {
            this.toastLoading.clear()
            this.toastLoading = ''
          }
        }
      },
    }
    

    组件使用实例

    <template>
    		// 开启下拉刷新
    	    <com-load-list :refresh=“true”>
    	    		 <van-cell v-for="item in list" >
    							//...
    					</van-cell>
    		</ com-load-list>
    </template>
    
    import loadingState from "@/mixins/loading-state";
    import list_page from "@/mixins/load-list";
    
    
    export default {
    	  mixins: [loadingState, list_page],
    	  created() {
    	    this.addLoading();
    	    this.onLoad();
    	  },
    	  methods: {
    	  // 获取页面数据
    	    async onLoad() {
    	      const res = await selAccessTaskList(this.roomId);
    	      //this.onEndLoad(res, 'data')	
    	      this.onEndLoad(res, '', _=> {
    	      // 此处只关心数据处理
    	        this.accessTaskAuthor = res.datedec.accessTaskAuthor || {};
    	        this.bsf = res.datedec.bsf;
    	        this.isAdmin = res.datedec.isadmin;
    	        //...
    	        return res.datedec.data;
    	      })
    	    },
    	}
    }
    
    
    展开全文
  • 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里加载数据
    在这里插入图片描述

    展开全文
  • vant-list使用

    2021-06-10 11:54:15
    van-list v-model="loading" // 是否显示正在加载状态 :finished="finished" // 是否已经加载完成 finished-text="没有更多了" // 加载完成提示文案 @load="onLoad" // 滚动条与...
  • vant-ui 的 list 就有个bug,当切换 tab 的时候,它的 onload 没方法自动触发。然而在当前标签页,如果列表已经加载完毕再去切换,onload 就可以实现自动触发。 切换后 onload 不触发 解决办法: methods:{ confirm...
  • 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 组件总结

    千次阅读 2020-04-05 17:42:29
    list组件注意事项 1 接口调用失败,会循环调用接口,解决办法加载失败需要处理 2 list请求一次要一满屏,不然会接着调用 3 接口请求反回停止的条件 1》加载失败 2》数据加载完成,再没有了 3》调用一次数据...
  • van-list v-model="loading" // 是否显示正在加载状态 :finished="finished" // 是否已经加载完成 finished-text="没有更多了" // 加载完成提示文案 @load="onLoad" // 滚动条与...
  • 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
  • <van-pull-refresh v-...van-list v-model="loading" :offset="50" :finished="finished" finished-text="没有更多了" @load="onLoad"> <van-cell v-for="(item, index) in pointsList" :key="index" cl.
  • 使用vant组件中van-tabs、van-pull-refresh和van-list时,切换tabs标签,列表重复加载问题 问题现象:tabs切换时,如果之前的tab已经滚动到底部,直接点击其他的tab,将再触发一次onload事件。 问题原因:这种情况下...
  • data中设置 list:[], loading:false, finshed:false async onLoad () { // 1. 请求获取数据 const { data } = await getSearch({ page: this.page, // 页码 per_page: this.perPage, // 每页大小 q: this.q // 搜索...
  • Vue + Vant List 列表()

    千次阅读 2020-11-06 10:17:09
    Vant List 列表 介绍 瀑布流滚动加载,用于展示长列表,当列表即将滚动到底部时,会触发事件并加载更多列表项。 引入 import Vue from 'vue'; import { List } from 'vant'; Vue.use(List); 代码演示 基础...
  • vant list组件滚动保留滚动条位置

    千次阅读 2021-09-12 10:02:39
    vant list组件滚动保留滚动条位置,需结合keepAlive使用 1、保存位置的前提是用的keepAlive组件来做缓存,app.vue代码 <template> <div id="app"> <keep-alive> <router-view v-if='$route....
  • Vant Ui van-list列表用法

    2021-11-30 09:15:32
    Vant Ui van-list列表用法 HTML代码 <div> <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" > <van-cell v-for="(item, index) in 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中的toast做加载中的loading提示,则有可能会导致列表滚动高度为0,也就是回到了顶部。只要在list加载回调里不使用toast就可以避免这个问题。 ...
  • vant list immediate-check设置

    千次阅读 2020-06-09 10:17:22
    每次更新列表,列表从底部弹出,不希望默认进入加载 首先设置了immediate-check为false 第一次更新列表没有问题,onload方法走了一次,但是第二次更新列表时,onload方法走了两次。。。,把loading 置为true 问题...
  • vue使用vantlist组件使用

    千次阅读 2020-05-26 17:21:46
    van-list v-model="loading" :finished="finished" :finished-text="finishedText" @load="pullupLoadMore" > <ul v-for="(item,id) in allHouseDetail" :key="id" > <li @click="chooseRoom...
  • 蘑菇街移动端项目,使用vant框架中的list组件还有tab组件,完成了tabbar-control组件 ![tab栏切换](https://img-blog.csdnimg.cn/20200923235804481.png#pic_center) 问题描述: 提示:这里描述项目中遇到的问题:...
  • vant-list加上tab之后分页异常

    千次阅读 2019-06-19 14:47:33
    忍不住要来写一下vant-list分页之后的加载问题 想破脑袋也不知道为什么带有切换tab的list组件,每次会自动加载load事件 问题大概就是:将一个页面拉到底,切换tab之后会自动加载load事件 问题解决:在tab切换的时候...
  • van-list v-model="loading" :finished="finished" :finished-text="`查询到 ${showList.length} 条信息`" @load="getMessageListFun"> <div class="items" v-for="(item ,i ) in showLi.
  • vantlist列表组件使用(附详细注释)

    万次阅读 热门讨论 2020-03-12 18:32:05
    vantlist组件使用 html: <van-list v-model="loading" // 是否显示正在加载状态 :finished="finished" // 是否已经加载完成 finished-text="没有更多了" // 加载完成提示文案 @load=...
  • 使用Vant框架list组件遇到的坑

    千次阅读 2021-03-11 01:24:57
    Vant 是有赞前端团队开源的移动端组件库,于 2017 年开源,已持续维护 4 年时间。Vant 对内承载了有赞所有核心业务,对外服务十多万开发者,是业界主流的移动端组件库之一。 特性 提供 60 多个高质量组件,覆盖...
  • 1.使用vant-list在滚动条触底的时候,没有触发onLoad事件 可能是因为在van-list父元素的地方设置了父元素高度为100%,这里不能这样设置, 还有就是可能对需要遍历的数据,在每一次触底时,都进行了初始化 2.有时候在...
  • 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" 设定...

空空如也

空空如也

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

listvant