位置: IT常识 - 正文

Element UI - v-infinite-scroll无限滚动组件

编辑:rootadmin
Element UI - v-infinite-scroll无限滚动组件

推荐整理分享Element UI - v-infinite-scroll无限滚动组件,希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

Element UI - v-infinite-scroll无限滚动组件

一、v-infinite-scroll无限滚动组件使用详解

1、v-infinite-scroll="load" //load无限滚动加载的方法 2、infinite-scroll-disabled //是否禁用无限滚动加载 3、infinite-scroll-delay //节流时延,单位为ms 4、infinite-scroll-distance //触发加载的距离阈值,单位为px 5、infinite-scroll-immediate //是否立即执行加载方法,以防初始状态下内容无法撑满容器。 //默认情况下,infinite-scroll-disabled是false,因此如果组件使用无限滚动加载组件,即使在vue不进行加载方法的调用,组件也会调用该方法,因此如果需要控制的话,尽量是使用infinite-scroll-disabled属性来进行加载方法是否调用的控制。

二、组件无限加载原因及解决方式 1、问题:使用无限加载的div没有设置高度导致无限加载 解决方案: <div v-infinite-scroll="load" :infinite-scroll-disabled="isInfiniteScrollDisabled" style="margin-bottom: 20px;height:640px;overflow-y:auto" //style的设置非常关键,一定要设置height高度 > 在指令使用的div一定要限定高度(height:xxx; overflow-y:auto)load加载方法将在拉取底部时才会被执行。 2、问题:为什么在vue中并没有在任何生命周期中进行load方法的调用,直接就加载了方法? 解决方案:使用 :infinite-scroll-disabled="isInfiniteScrollDisabled“属性来进行控制。 3、代码demo演示

<template> <div class="vue-class-name"> <div v-infinite-scroll="load" :infinite-scroll-disabled="isInfiniteScrollDisabled" style="margin-bottom: 20px;height:640px;overflow-y:auto" > <div v-for="item in dataList" :key="item.index" style="display: inline-block;margin:0px 10px 10px 0px" > <span>{{item}}</span> </div> <el-empty description="No Data" v-if="dataList.length == 0" style="height:650px;overflow-y:auto;text-align:center" ></el-empty> <!-- 这个div一定要放在使用指令的div里面--> <div align="center" v-if="dataList.length > 0"> <div class="drawer-footer"> <span v-if="pullStatus === $enum.STATUS.START"> Pull up to load more </span> <span v-if="pullStatus === $enum.STATUS.LOADING"> loading <i class="el-icon-loading"></i> </span> <span v-if="pullStatus === $enum.STATUS.NODATA"> no more data </span> </div> </div> </div> </div></template><script>export default { name: 'VueName', mixins: [], components: {}, props: {}, data: function() { return { pullStatus: this.$enum.STATUS.START, pageIndex: 1, pageSize: 20, dataList: [], isInfiniteScrollDisabled: false, }; }, computed: {}, watch: { //事件监听:当刷新浏览器页面或者切换项目的时候进行方法调用 projectSpaceId: function(value, oldValue) { this.dataList = []; this.pageIndex = 1; this.pullStatus = this.$enum.STATUS.START; this.getLoadMoreData(); }, }, created() {}, mounted() { //一进入页面进行方法调用 this.getLoadMoreData(); }, methods: { getLoadMoreData() { if (this.pullStatus != this.$enum.STATUS.START) { return; } this.pullStatus = this.$enum.STATUS.LOADING; this.isInfiniteScrollDisabled = true; let params = {};//请求参数,可省略 this.getData(params).then(resp => { if (data.length < this.pageSize ) { this.pullStatus = this.$enum.STATUS.NODATA; } else { this.pageIndex++; this.pullStatus = this.$enum.STATUS.START; } if (resp.data.length > 0) { this.dataList = this.dataList.concat(resp.data);//数组拼接,得到拼接后的数据 } this.isInfiniteScrollDisabled = false; }); }, }, beforeDestroy() { this.dataList = []; //清空数组};</script><style scoped></style>//常量定义export const STATUS= { START: 0, // 上拉加载 LOADING: 1, // 加载中 NODATA: 2, // 没有更多数据};

三、总结 当然,这个组件还有很多可以优化的地方,比如:可以将下面这一段代码抽成公共组件,使用该组件的地方,只需要传当前的pullStatus状态即可。

<div class="drawer-footer"> <span v-if="pullStatus === $enum.STATUS.START"> Pull up to load more </span> <span v-if="pullStatus === $enum.STATUS.LOADING"> loading <i class="el-icon-loading"></i> </span> <span v-if="pullStatus === $enum.STATUS.NODATA"> no more data </span> </div>

同时,也可以封装成一个mixins,这样同一个项目,如果多处需要滚动分页,那么这样代码就会更加简洁和方便,下面我粘贴一下mixins里面的代码:

/** * 页面无限滚动加载*/export default { name: "infiniteScrollMixins", data() { return { pullStatus: this.$enum.STATUS.START, pageIndex: 1, pageSize: 20, } }, computed: {}, created() {}, methods: { loadMoreData() { if (this.pullStatus != this.$enum.STATUS.START) { return; } this.pullStatus = this.$enum.STATUS.LOADING; if(this.getLoadMoreData) { //使用该mixins的组件需要定义该方法 this.getLoadMoreData(); } }, setPullStatus(data = []) { if (data.length < this.pageSize ) { this.pullStatus = this.$enum.STATUS.NODATA; } else { this.pageIndex++; this.pullStatus = this.$enum.STATUS.START; } } }, beforeDestroy() {},};

如何使用封装的mixins? 1、导入: import 名称 from ‘路径’; 2、

本文链接地址:https://www.jiuchutong.com/zhishi/297508.html 转载请保留说明!

上一篇:【小程序从0到1】宿主环境|WXML|WXSS|JS逻辑交互(微信小程序从零)

下一篇:【已解决】ERROR:The testing results of the whole dataset is empty(error出错)

  • 抖音视频通话有美颜吗

    抖音视频通话有美颜吗

  • p40只有4个摄像头吗(华为p40的3个摄像头只有中间的能照相吗)

    p40只有4个摄像头吗(华为p40的3个摄像头只有中间的能照相吗)

  • 华为手机正确充电方法(华为手机正确充电方法官方回答)

    华为手机正确充电方法(华为手机正确充电方法官方回答)

  • 速通卡etc蓝牙连不上(速通卡etc蓝牙连接不上)

    速通卡etc蓝牙连不上(速通卡etc蓝牙连接不上)

  • 动态号码失效是什么意思(动态号码失效是怎么回事)

    动态号码失效是什么意思(动态号码失效是怎么回事)

  • GPRS怎么关闭(OPPOgprs怎么关闭)

    GPRS怎么关闭(OPPOgprs怎么关闭)

  • oppoa57屏幕尺寸(OPPOa57屏幕尺寸)

    oppoa57屏幕尺寸(OPPOa57屏幕尺寸)

  • 不同网络体系结构的网络互联时需要使用(不同网络体系结构互联)

    不同网络体系结构的网络互联时需要使用(不同网络体系结构互联)

  • 手机烧屏会自己恢复吗(手机烧屏会自己修吗)

    手机烧屏会自己恢复吗(手机烧屏会自己修吗)

  • 苹果11怎么隐藏软件(苹果11怎么隐藏视频)

    苹果11怎么隐藏软件(苹果11怎么隐藏视频)

  • 苹果电池容量掉的快是什么原因(苹果电池容量掉了能充满电吗)

    苹果电池容量掉的快是什么原因(苹果电池容量掉了能充满电吗)

  • 手机内屏坏了怎么办(手机内屏坏了怎么把手机里面的东西导出来)

    手机内屏坏了怎么办(手机内屏坏了怎么把手机里面的东西导出来)

  • vivo自带变声器吗(vivo自带变声器下载)

    vivo自带变声器吗(vivo自带变声器下载)

  • 奔腾g630相当于酷睿i几(奔腾g630相当于amd的哪一个)

    奔腾g630相当于酷睿i几(奔腾g630相当于amd的哪一个)

  • ipad 型号a1701是哪一款(ipad a1701是几代)

    ipad 型号a1701是哪一款(ipad a1701是几代)

  • iphone11拍照模糊(为什么iphone11拍照模糊)

    iphone11拍照模糊(为什么iphone11拍照模糊)

  • 微信腾讯会员怎么共用(微信腾讯会员怎么共享给别人用)

    微信腾讯会员怎么共用(微信腾讯会员怎么共享给别人用)

  • 手机网络限速怎么办(手机网络限速怎样恢复)

    手机网络限速怎么办(手机网络限速怎样恢复)

  • 乐视投屏怎样用(乐视投屏怎样用手机控制)

    乐视投屏怎样用(乐视投屏怎样用手机控制)

  • 个人退群后信息还在吗(个人退群后信息会消失吗)

    个人退群后信息还在吗(个人退群后信息会消失吗)

  • 费的锂电池可以回收吗(锂电池能直接扔掉吗)

    费的锂电池可以回收吗(锂电池能直接扔掉吗)

  • 苹果手表4能测睡眠吗(苹果手表4测血压教程)

    苹果手表4能测睡眠吗(苹果手表4测血压教程)

  • pu口袋校园登不进去(pu口袋校园登不进去 pu口袋校园打不开)

    pu口袋校园登不进去(pu口袋校园登不进去 pu口袋校园打不开)

  • airpods无线充电盒有必要买吗(airpods无线充电盒和充电盒区别)

    airpods无线充电盒有必要买吗(airpods无线充电盒和充电盒区别)

  • 平板插卡插的是什么卡(平板插sim卡不能用是怎么回事)

    平板插卡插的是什么卡(平板插sim卡不能用是怎么回事)

  • 提前报废的设备
  • 增值税审核表
  • 购买研发设备的会计分录
  • 购买的固定资产什么时候折旧
  • 债券投资收益怎样计算
  • 注册商标怎么做账
  • 外贸企业视同内销进项可以抵扣吗
  • 承兑汇票怎么委托收款
  • 实收资本属于会计科目吗
  • 银行利息收入确认时间会计与税法的差异
  • 为什么要开增值税
  • 税务局查账征收转为核定征收之程序
  • 个人能去税务局开普票吗
  • 坏账准备怎么冲回
  • 小微企业必须给员工缴纳哪些保险
  • 代收房租费
  • 验资报告需要什么材料
  • 审计查出假发票怎么补救
  • 企业职工集资款的认定标准
  • 税控系统服务费怎么抵扣
  • 怎么授权gg修改器root权限
  • 住宿费和差旅费
  • 怎样跳过windows开机更新
  • 销售货物货款未收的会计分录
  • php assign
  • 债券的回购
  • php模板引擎执行时间
  • 税务系统申报表
  • 前端2020年趋势
  • 微信小程序基于什么框架
  • php curlfile
  • 短期投资的入账成本
  • 存货盘盈盘亏会涉及到其他应收款吗
  • java拼接字符串和数字
  • 出租厂房会计分录怎么写
  • python模块的搜索路径
  • 工程施工科目借方尾差怎么调整
  • 付国外专利费用需办什么手续
  • 非财政补助结余在资产负债表中怎么填
  • 个税申报汇算清缴流程
  • mysqldump定时备份
  • 应收账款和应付账款可以对冲吗
  • 固定制造费用差异的意义
  • 办公桌椅入什么会计科目
  • 企业购进货物暂欠货款
  • 广告公司转让一般多少钱
  • 合并报表时抵消内部交易包含的未实现损益的影响包括
  • 无法收回的应收账款如何进行财务处理
  • 客户退货,但不退货
  • 收到银行利息记什么会计科目
  • 福利费专票分录
  • 行政事业单位计提工资怎么做账
  • 中银单位结算卡年费
  • 股东现金存入公司账户,该如何做账?
  • 三方抵账协议做什么科目
  • 工业企业发生的各项费用都应计入产品成本对不对
  • sql server 1222解决
  • xp系统怎么设置系统启动项
  • win10快速切换到桌面快捷键
  • macbook系统截图
  • linux系统有哪几个
  • nodejs异步处理执行顺序
  • jQuery插件封装时如要实现链式编程,需要
  • 考四级题型
  • python爬虫全套教程
  • eval()方法
  • 批处理编程教程
  • 批处理 判断文件是否存在
  • nodejs连接redis
  • js中如何弹出提示框
  • jquery图片左右切换
  • 电子税务局网页版登录入口官网
  • 村财审计报告怎么写
  • 江苏4050社保补贴政策2024
  • 境外抵免限额如何申请
  • 山东网上信访投诉平台
  • 增资注册资本
  • 如何在国税电子税务平台为员工办理定制社保卡
  • 纳税申报期限2023
  • 电子发票查询官方
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设