vue---mint-ui组件loadmore(上拉加载,下拉刷新)
1. 先安装mint-ui
2. 在main.js中引入mint-ui的css样式和组件
import "mint-ui/lib/style.css";
import {Loadmore} from 'mint-ui';
Vue.component(Loadmore.name,Loadmore)
3. 使用loadmore组件
<template>
<div class="page-loadmore">
<mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore">
<ul >
<li v-for="item in list" >{{ item }}</li>
</ul>
</mt-loadmore>
</div>
</template>
<script type="text/babel">
export default {
data() {
return {
list: [],
allLoaded: false,//数据是否加载完毕
};
},
methods: {
loadTop() {//上拉加载
this.$refs.loadmore.onTopLoaded();
}, loadBottom() {//下拉刷新
var vm = this;
this.$refs.loadmore.onBottomLoaded();
if(!vm.allloaded){
//调用接口(pageNum+1)
}else{
console.log('没有更多数据了')
}
} },
}; </script>
vue---mint-ui组件loadmore(上拉加载,下拉刷新)的更多相关文章
- Vue mint ui用在消息页面上拉加载下拉刷新loadmore 标记
之前总结过一个页面存在多个下拉加载的处理方式,今天再来说一下在消息页面的上拉加载和下拉刷新,基本上每个app都会有消息页面,会遇到这个需求 需求:每次加载十条数据,上拉加载下拉刷新,并且没有点击查看过 ...
- 上拉加载下拉刷新控件WaterRefreshLoadMoreView
上拉加载下拉刷新控件WaterRefreshLoadMoreView 效果: 源码: // // SRSlimeView // @author SR // Modified by JunHan on ...
- RecyclerView 上拉加载下拉刷新
RecyclerView 上拉加载下拉刷新 <android.support.v4.widget.SwipeRefreshLayout android:id="@+id/teach_s ...
- APICloud上啦加载下拉刷新模块
apicloud有自带的上啦加载下拉刷新,当让也可以用第三方或者在模块库里面找一个使用 一.下拉刷新,一下代码写在 apiready = function (){} 里面 apiready = fun ...
- 微信小程序上拉加载下拉刷新
微信小程序实现上拉加载下拉刷新 使用小程序默认提供方法. (1). 在xxx.json 中开启下拉刷新,需要设置backgroundColor,或者是backgroundTextStyle ,因为加载 ...
- mui scroll和上拉加载/下拉刷新
mui中 scroll和上拉加载/下拉刷新同时存在会出现两个滚动条 把/* */ /* //mui页面鼠标拖动代码: mui('.mui-scroll-wrapper').scroll({ dec ...
- 基于better-scroll封装一个上拉加载下拉刷新组件
1.起因 上拉加载和下拉刷新在移动端项目中是很常见的需求,遂自己便基于better-scroll封装了一个下拉刷新上拉加载组件. 2.过程 better-scroll是目前比较好用的开源滚动库,提供很 ...
- Flutter上拉加载下拉刷新---flutter_easyrefresh
前言 Flutter默认不支持上拉加载,下拉刷新也仅仅支持Material的一种样式.Android开发使用过SmartRefreshLayout的小伙伴都知道这是一个强大的刷新UI库,集成了很多出色 ...
- XListView实现上拉加载下拉刷新
package com.loaderman.androiddemo; import android.content.Context; import android.util.AttributeSet; ...
- SwipeRefreshLayout实现上拉加载下拉刷新
package com.example.swiperefreshlayoutdemo; import java.util.ArrayList;import java.util.HashMap; imp ...
随机推荐
- MariaDB的安装与启动
MariaDB的安装与启动 1.安装前需要删除系统已存在的mysql及mariadb [root@vm172--- ~]# rpm -qa|grep mysql [root@vm172--- ~]# ...
- Redis入门的简单使用
Redis是什么? redis是一个开源的,面向键/值对的NOSQL的分布式数据库系统 NOSQL指的是非关系型的数据,简单直白地讲就是在非关系型的数据库中不存在表的概念,而是以键值对的方式, 即一个 ...
- CentOS7.5 安装MySQL8 tar
1.查看是否安装mariadb 执行命令: [root@mysql ~]# rpm -qa | grep mariadb 显示: mariadb-libs-5.5.56-2.el7.x86_64 2. ...
- 探索C++头文件解析方法
最近一直在搞基于SWIG的C++接口翻译Java代码的工作.SWIG内部基于Bison(Yacc)的C/C++解析器,最近纠结于SWIG不能解析C++构造函数中的默认初始化赋值操作,想找一个能够补充此 ...
- Office365维护命令
# 会议室日历相关# 日语:予定表# 汉语:日历Set-MailboxFolderPermission -Identity "XXXXX@qq.com:\Calendar" -ac ...
- javaweb开发大致流程
- 使用SimpleDateFormat类来实现时间跟字符串的转化
使用Date和SimpleDateFormat类表示时间 1.Date类 需要处理日期和时间的相关数据时可以使用 java.util 包中的 Date 类,这个类最主要的作用就是获取当前时间.下面看看 ...
- vs2017使用问题
最近安装了新版本的Visual studio 2017,但是在使用的过程中遇到了这样一个问题.刚启动电脑后,打开vs2017是可以打开的,但是当关掉之后再打开就打不开了,但是任务管理器看可以看到有一 ...
- linux下怎么清理缓存
free -m 命令可以查看内存使用情况 sysctl 命令可以临时改变某个系统参数 如:sysctl -w net.ipv4.ip_forward=1 是将forware参数临时改为1 当 ser ...
- Jenkins服务使用nginx代理服务器做负载均衡
学习nginx代理服务器做负载均衡的使用 在本地安装Nginx 1.下载nginx http://nginx.org/en/download.html 下载稳定版本,以nginx/Wi ...