vue.js - vue 滚动条下拉到底部 加载新数据有bug

问题描述

问 题

http://runjs.cn/code/hw5w0qdx
1、一共有八百多笔记数据，但滚动到底就加载新一条数据，之后就没有出来了，在network Xhr可以看到有请求啊。为什么vue loadMore还是没更新呢，是不是我哪里的方法写得不对。
2、下拉到底部还会重复请求。请问如何优化啊？

解决方案

你现在接口拿不到数据，所以做不了测试，但是应该问题是出在给sites增加数据的步骤上，因为刚才点了几下发现每次滚动加载的时候你的sites.length一直是10。

具体要做的优化还是蛮多的：
1.你没有判断鼠标滚动的时候是往上滚动的还是往下滚动的。
2.既然用了vue，可以暂时抛弃jquery，你定义的两个请求数据的方法完全可以写在vue的methods中
3.滚动效果不建议使用directives指令，你可以直接在mounted中给document绑定一个事件来监听scroll，如果是往下滚动并且滚动条在底端，就执行加载事件，并同时设置scrollDisable。
4.加载函数中可以直接在success中对sites和sites进行操作，不需要再另设一个函数，在结束的时候再定义scrollDisable为false。
5.两个请求数据的函数可以合并成一个，通过传值是我的笔记还是采集笔记来判断使用哪一个
6.你打印出来的这两句加载出来了有问题，因为你在打印后还要判断scrollDisable是否为false，最好打印放在加载时候的success的时候。

这篇关于vue.js - vue 滚动条下拉到底部 加载新数据有bug的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！