vue 移动端实现上拉加载更多

根据项目需求实现上拉加载更多～我用的是 vue-infinite-loading 插件实现的。下面是安装流程和使用方法：有需要直接拿去用
第一步：安装

npm install vue-infinite-loading --save

第二步：在需要上拉加载的单页面引入

import InfiniteLoading from "vue-infinite-loading"; //引入加载更多组件

第三步：在 components 中声明组件

components: {InfiniteLoading}

第四步：在data里定义页码和每页请求的数据个数以及列表数组

 data() {return {page: "1",size: "10",list: []};

第五步：在methods中写上请求数据的方法

  methods: {getList($state) {let params = new URLSearchParams();params.append("page", this.page);params.append("size", this.size);this.$post(httpApi.USERLIST, params).then(res => {if (res.code == 10000) {if (res.data) {this.list = this.list.concat(res.data.list);this.page++;if (res.data.agentareausers.length === 10) {$state.loaded();} else {$state.complete();}} else {$state.complete();}} else {$state.complete();}}).catch(err => {console.log(err);});}},

第六步：在页面添加组件然后调用请求数据的方法

// 这里的 @infinite="getList"  这个getList是请求数据的方法，你可以换成你自己的即可<infinite-loading @infinite="getList"><span slot="no-results" style="padding-bottom:50px;">没有更多了～</span><span slot="no-more">没有更多了～</span></infinite-loading>

好啦。按照以上的步骤去操作，完成后赶快测试下吧，我项目中都是用的这个组件来实现上拉加载更多的。需要的朋友们直接拷贝粘贴拿去用吧。喜欢博主的关注哦，后续还会更新更多知识点和问题。相互学习

vue 移动端实现上拉加载更多相关推荐

上拉加载_如何用Vue + Mint UI实现上拉加载更多
引言: 上拉加载更多在移动端不论是在 app 里面还是在页面中都是必不可少的,以下是 mint-ui 中上拉加载更多的总结. 一.在项目中使用 mint-ui 需要先安装查看官网 (1)安装:npm ...
Jquery 实现H5页面上拉加载更多
在最新的H5开发项目中,需要开发上拉加载更多的功能,如何实现上拉加载更多,网上有很多插件可以实现,如:mescroll.mui.isScroll等等,最初我也是选择了使用插件,但在使用过程中发现了如果 ...
vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多
一.思路分析和效果图用vue来实现一个瀑布流效果,加载网络图片,同时有下拉刷新和上拉加载更多功能效果.然后针对这几个效果的实现,捋下思路: 根据加载数据的顺序,依次追加标签展示效果: 选择哪种方式实 ...
Vue 组件封装之 ScrollView 上拉加载更多
Vue 组件封装之 ScrollView 上拉加载更多一.ScrollView 上拉加载更多二.使用案例三.API 使用指南四.源代码一.ScrollView 上拉加载更多组件说明: 实现 ...
webpack+vue+mint-ui 实现上拉加载更多（Loadmore组件）
因为业务的需要界面需要实现分页的功能,所以我就研究了一下如何利用mint-ui自带的loadmore组件实现上拉加载更多功能. 首先在文件中引入组件 import {Indicator, Loadmo ...
java h5 上拉加载更多_移动端H5页面上拉加载更多功能实现（二）
之前已经写过一篇关于上拉加载更多的文章,那个主要是根据滚动实现分页向后台发起请求实现.这次实现方式为后台返回所有需要加载的数据,前端这边做视觉上的分页效果.实现原理也是根据滚动距离触发加载更多的条件. ...
H5——移动端JQ实现下拉刷新、上拉加载更多
前言这里用的JQ库里免费插件__dropload,效果图在文末引入去上面链接里面下载内容,可以本地引入 <link rel="stylesheet" href=&quo ...
RecyclerView实现上拉加载更多的正确姿势
最近项目上的需求需要实现下拉刷新和上拉加载更多的功能,RecyclerView下拉刷新我相信安卓的同学都会做,无非是利用SwipeRefreshLayout,然后给swipeRefreshLayout ...
小程序：双向数据绑定、父子传参、上拉加载更多、如何使用vant
1.双向数据绑定单向绑定语法 1.普通的属性的绑定是单向的.例如: <input value="{{value}}" /> 解析: 如果使用this.setData( ...

vue 移动端实现上拉加载更多

vue 移动端实现上拉加载更多相关推荐

最新文章

热门文章