美文网首页Vue
Vue无限滚动加载数据,无插件

Vue无限滚动加载数据,无插件

作者: 小丶枫 | 来源:发表于2019-05-22 15:09 被阅读0次

    搭建的一个项目用的是mint-ui的无限滚动插件,但是运用上去没效果,百度了半天,都说是什么高度问题,好吧 我设置了高度,依然不行,所以我就想着不用插件了 自己弄个出来,根据百度大佬们的说法,自己琢磨了一下,废话不多说,上代码。

    首先

    先在div框里设置ref,当然你也可以用jq,但我这里没有jq,所以就直接这样获取dom了

    template内容

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

    data内容

    好的,下面是重点了。

    created钩子函数操作dom是需要放在$nextTick的回调函数里,想了解请去官网看下文档

    别问为什么不在mounted里面写,问就是不知道.

    然后就开始获取dom对象了,需要获取滚动条的垂直高度div框的高度,和滚动区域的高度

    然后就开始判断控制器了,防止不停加载

    如果不懂判断区域的条件可以打印出来看下就知道了,设置定时器是为了不让用户不停往下滑造成的加载数据太快,因为太快了可能会有什么bug之类的东西出现

    一开始进入页面的时候是需要加载一次数据的,在mounted里面加载1次,然后就按下面的写了,很简单的

    concat()的作用是拼接2个数组,想看更详细请百度吧

    获取数据

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

    相关文章

      网友评论

        本文标题:Vue无限滚动加载数据,无插件

        本文链接:https://www.haomeiwen.com/subject/mbfuzqtx.html