webpack+vue+mint-ui 实现上拉加载更多(Loadmore组件)
因为业务的需要界面需要实现分页的功能,所以我就研究了一下如何利用mint-ui
自带的loadmore组件实现上拉加载更多功能。
首先在文件中引入组件
import {Indicator, Loadmore} from 'mint-ui';
参考了一下组件中的一些参数
bottomMethod 是上拉刷新执行的方法
bottomPullText 为 pull 时加载提示区域的文字 默认值为上拉刷新,一般我会定义为上拉加载更多
bottomAllLoaded 若为真,则 bottomMethod 不会被再次触发
然后在HTML中写法如下
<mt-loadmore :bottom-method="loadBottomUse":bottom-all-loaded="allUseLoad" :bottomPullText='bottomText'ref="loadmore"><div class="tab-list" v-for='item in useScoreLog'><div class="tab-list-top"><span class="tab-name">{{item.remark}}</span><span class="tab-num">{{item.score}}</span></div><div class="tab-list-bottom"><span class="tab-time">{{item.operateTime}}</span><span class="tab-class">{{item.recordTypeName}}</span></div></div></mt-loadmore>
js中写法如下
首先在data的方法中定义初始化加载中的数组getScoreLog,当前页数pageNo,是否加载allLoaded,上拉时加载的文字bottomText,初始化方法中的数量总数totalCount。
代码如下
data(){return {getScoreLog: [],pageNo: 1,allLoaded: false,bottomText: '上拉加载更多...',totalCount: '',}},初始化方法如下getData(){this.$http.post(commonUrl + "/restful/", {typeFlag: '1'}).then(response => {if (response.data.errcode == 0) {this.getScoreLog = response.data.scoreLog;this.totalGetCount = (response.data.recordCount + 9) / 10;}}, response => {});},
下面便是上拉加载更多的方法
loadBottom() {this.pageNo += 1;if (this.pageNo == this.totalGetCount) {this.allLoaded = true;}setTimeout(() => {this.$http.post(commonUrl + "/restful/", {pageNo: this.pageNo,typeFlag: '1'}).then(response => {if (response.data.errcode == 0) {this.getScoreLog = this.getScoreLog.concat(response.data.scoreLog);}}, response => {});}, 1500);},
这样就大功告成啦~
webpack+vue+mint-ui 实现上拉加载更多(Loadmore组件)相关推荐
- 上拉加载_如何用Vue + Mint UI实现上拉加载更多
引言: 上拉加载更多在移动端不论是在 app 里面还是在页面中都是必不可少的,以下是 mint-ui 中上拉加载更多的总结. 一.在项目中使用 mint-ui 需要先安装 查看官网 (1)安装:npm ...
- vue 移动端实现上拉加载更多
根据项目需求实现上拉加载更多-我用的是 vue-infinite-loading 插件实现的.下面是安装流程和使用方法:有需要直接拿去用 第一步:安装 npm install vue-infinite ...
- vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多
一.思路分析和效果图 用vue来实现一个瀑布流效果,加载网络图片,同时有下拉刷新和上拉加载更多功能效果.然后针对这几个效果的实现,捋下思路: 根据加载数据的顺序,依次追加标签展示效果: 选择哪种方式实 ...
- Vue 组件封装之 ScrollView 上拉加载更多
Vue 组件封装之 ScrollView 上拉加载更多 一.ScrollView 上拉加载更多 二.使用案例 三.API 使用指南 四.源代码 一.ScrollView 上拉加载更多 组件说明: 实现 ...
- 【Flutter】ListView 列表高级功能 ( ScrollController 上拉加载更多 )
文章目录 一.ScrollController 上拉加载更多 二.ScrollController 使用流程 三.ScrollController 判定滑动到底部 四.完整代码示例 五.相关资源 一. ...
- Flutter ListView封装,下拉刷新、上拉加载更多
Flutter ListView封装,下拉刷新.上拉加载更多 封装了Flutter的ListView,只要传递请求数据的方法和绘制item的方法进去就可以绘制ListView,同时支持下拉刷新.上 ...
- android listview自动加载更多,如何实现 Android ListView『上拉加载更多』?
ListView上拉加载更多的UI需求 (1)向上滑动 ListView,当最后一个条目滚入屏幕时开始加载更多条目,在列表底部增加一个 footerView:一个 infinite progressB ...
- android listview下拉刷新动画,android 安卓 listview 支持下拉刷新 上拉加载更多
[1]重写listViewimport java.text.SimpleDateFormat; import java.util.Date; import com.example.testdddlea ...
- 【Android归纳】基于XListView的下拉刷新、上拉加载更多的控件分析
目录 前言 功能介绍 总体设计 组成 类关系图 详细设计 XlistViewHeader原理分析 XListViewFooter原理分析 XListView原理分析 代码带注释下载 目录 前言 如果你 ...
最新文章
- 尹伊:我眼中的Datawhale
- Swift 烧脑体操(五)- Monad
- php5.4 traits
- 数据仓库专题(23):总线矩阵的另类应用-Drill Down into a More Detailed Bus Matrix
- OSI七层网络模型与TCP/IP四层网络
- xilinx c语言编程,使用Xilinx SDSoc在Xilinx zcu102开发板上编程HelloWorld
- [sybase]自动增长字段创建方法
- ajax获取表单php,Yii2基于Ajax自动获取表单数据的方法
- 今天的一条条平坦的即时通讯
- nodejs 环境搭建
- 英语学习笔记2019-10-18
- 现在这个时代变了,区块链,数字货币才是最火的项目
- PostgreSQL 递归查询 (转)
- Java Thread之Sleep()使用方法总结
- HotSpot虚拟机对象揭秘
- Java实现建行聚合支付对接及其回调
- win10小娜_win10小娜打不开没反应怎么办
- 苹果新推出的IPod播放器为三星奏出美妙乐符
- APISpace 预热开启
- 拼图游戏-小程序游戏
热门文章
- 禁止vim生成 un~文件
- cr3格式怎么转换成jpg_怎么把JPG格式转换为PDF?
- 百炼OJ:4146:数字方格
- 信息系统项目管理师:第5章:项目范围管理(2)-重点汇总
- 对于url出现jsessionid问题
- 笔记-项目范围管理-工作说明书与项目范围说明书的区别
- 笔记-知识产权与标准化知识-计算机软件可靠性和可维护性管理的评审要求
- Zabbix数据库需要多大硬盘
- AndroidStudio中提示:uses-sdk:minSdkVersion 16 cannot be smaller than version 19 declared in libr
- Android中实现保存和读取文本文件到内部存储器(实现简易的记事本为例)