搭建的一个项目用的是mint-ui的无限滚动插件,但是运用上去没效果,百度了半天,都说是什么高度问题,好吧 我设置了高度,依然不行,所以我就想着不用插件了 自己弄个出来,根据百度大佬们的说法,自己琢磨了一下,废话不多说,上代码。
首先
先在div框里设置ref,当然你也可以用jq,但我这里没有jq,所以就直接这样获取dom了

data里面最重要的是onFetching这个控制器了,控制无限滚动,必须要的,不然真·无限滚动了

好的,下面是重点了。
在created钩子函数操作dom是需要放在$nextTick的回调函数里,想了解请去官网看下文档
别问为什么不在mounted里面写,问就是不知道.
然后就开始获取dom对象了,需要获取滚动条的垂直高度,div框的高度,和滚动区域的高度
然后就开始判断控制器了,防止不停加载
如果不懂判断区域的条件可以打印出来看下就知道了,设置定时器是为了不让用户不停往下滑造成的加载数据太快,因为太快了可能会有什么bug之类的东西出现

一开始进入页面的时候是需要加载一次数据的,在mounted里面加载1次,然后就按下面的写了,很简单的
concat()的作用是拼接2个数组,想看更详细请百度吧

好了,大概的过程就这样子,可能加载的时候没有什么提示的,这个就需要自己加点什么东西了,本期就到这里结束了。
网友评论