摸爬滚打的蜗牛总算把vue-scroller这个玩意给搞明白了!直接上核心代码。。
主要参数:
on-refresh:下拉刷新
on-infinite:上拉加载
简单的说一下每一张图片的意思:
实现的目的就是根据控制页数来控制加载数据:
{pn:1,pageSize:10}):第一页、加载十条数据
{pn:2,pageSize:10}):然后滑倒底部触发让pn变成2、加载第二页的数据。
页数的自增长,当出现没有数据的时候、就提示没有更多数据了!!
mounted里面:
this.getDate(1):目的是初始化的时候1、这要就加载了第一页的数据;
this.$refs.my_scroller.finishInfinite(true);注意这个不加、初始化会出现两次加载;
this.mouseWheels():这个是用来控制鼠标滑轮滚动、滑倒底部就触发、有个bug我向上话的时候它不触发,我也是放弃了。有大佬实现的欢迎指点指点。
methods里面:
template