位置: 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出错)

  • 小规模纳税人月销售额超过15万
  • 增值税影响利润总额吗
  • 汇总记账凭证会计核算形式与科目汇总表
  • 办公用品普通发票的会计分录
  • 小规模纳税人怎么变成一般纳税人
  • 公司名称变更在哪个网站
  • 增值税发票税控开票软件怎么下载
  • 多缴税款抵税有期限吗
  • 个税返还手续费奖励员工需要交个税吗
  • 怎样查验电子发票真伪
  • 财付通转账手续费多少
  • 资本公积转增股本什么意思
  • 房地产企业开发间接费用包括哪些
  • 包装设置图片
  • 销售商品房属于什么税
  • 年终奖有计算公式吗
  • 应收帐款坏帐损失摘要
  • 资本公积转增股本个人所得税
  • 车间报废产品改善方式
  • 采购工程物资会议纪要
  • 增值税附加税计入什么会计科目
  • 打印机的增值税率
  • 水利基金的计税依据是含税收入还是不含税收入
  • 企业为一般纳税人税率多少
  • 购买设备对方垫付运费会计分录
  • 购入生产车间
  • 环保税计算方法和税率1.2
  • 母公司向全资子公司划转土地
  • 公司租车交税
  • 华为nova9值得买吗知乎
  • 总公司中标分公司签约
  • 企业内部股权划拨流程
  • 季度交企业所得税是按照什么来交的
  • 营业利润期末余额怎么算
  • 静电现象什么意思
  • 海月水母有性别吗
  • 企业所得税如何计算应纳税所得额
  • php查询mysql数据库
  • 模型论文是什么类型
  • es命令行
  • 最新预提房租会计分录
  • 长投转可供
  • phpcms v9 getshell
  • 住宿费记入管理费用还是营业费
  • MySQL主从数据库搭建
  • 发票临时增量好难
  • 利息应怎么录入收入
  • 现金流量表中的现金流量包括哪些
  • 企业为职工支付的补充医疗保险费
  • 劳务派遣公司开票内容写什么
  • 确认销售收入时不影响应收账款入账金额的是
  • 对公账户取钱该怎么取钱
  • 材料折扣会计分录
  • 其他应收款待抵扣借方是什么意思啊
  • 怎么结转本月期间损益
  • 原始凭证填制的基本内容
  • 市盈率为负数是说明什么呢
  • window msconfig
  • ubuntu kylin 14.04下载 ubuntu优麒麟14.04 lts下载地址
  • 装载win10系统
  • win7能装coreldraw2020吗
  • cocos2dx schedule
  • awk中RS、ORS、FS、OFS的区别和联系小结
  • python把html页面生成图片
  • bash linux命令
  • python动态创建函数
  • jQuery实现textarea自动增长宽高的方法
  • android升级是什么意思
  • npm安装nodemodules
  • 可扩展的敏捷方法有哪两种观点,并作以简单阐述?
  • unity如何导出vr项目
  • js prototype constructor
  • flask框架官方文档
  • 税务部门督查内审部门监督检查的内容
  • 江苏国家电子税务局新版本怎么申领发票
  • 云南地税局官网
  • 镇江涨潮退潮时间表
  • 国家税务总局上海税务局(个人)
  • 法治税务示范基地枫桥
  • 国税和地税归哪里管
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设