vue开发中实现加载更多升级版

使用vue开发的时候,特别是写后台系统的时候,一个很平常的功能就是分页的一个实现改进,之前写了一个加载更多的,但是代码显得很多,这次刚好可以优化下:

  • 首先在methods中添加一个获取数据的方法,例如:

上面代码注意红色方框里面的内容,主要是使用foreach循环数组然后将每一项push到data中定义好的空数组中,注意是push不是直接等于。

  • 其次在mounted钩子函数中注册滚动事件并监听

上面的每个方框分别是:

  1. 默认显示的数据
  2. 滚动高度的获取兼容写法
  3. 判断是否滚动到底部
  4. 加载数据

要注意最后一个方框中的pageIndex一定要加1,不然就没有效果了。

其他的废话不多说,大家直接看上面的截图吧。

如果觉得有帮助请我吃个糖吧!


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值