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 ...
随机推荐
- C# winform使用combobox遍历文件夹内所有文件
参考:https://www.cnblogs.com/hxh88/p/5814291.html 相关函数解析: 1.指定目录包含的文件和子目录 DirectoryInfo.GetFiles():获取目 ...
- Linux系统编程——水平触发和边沿触发
事件模型 EPOLL事件有两种模型: Edge Triggered (ET) 边缘触发只有数据到来才触发,不管缓存区中是否还有数据. Level Triggered (LT) 水平触发只要有数据都会触 ...
- CSS3 之 Media(媒体查询器)
1.响应式Media(媒体查询器) (1)<link rel=“stylesheet” media=“screen and (max-width: 600px)” href=“small.css ...
- Redis简单入门
什么是Reids 就是一个数据库,将数据保存在内存中 优点 支持数据持久化 支持丰富的数据类型 (字符串,哈希,列表,集合) 和Me的区别:Me是简单版的Redis,Me不支持持久化.Me仅仅支持字符 ...
- C#学习-图解教程(2):访问修饰符(其中两种)
学习内容:C#:学习书籍:图解教程(中文第四版). 目录:第四章 类的基本概念 -----> 4.8 访问修饰符 访问修饰符 从类的内部,任何函数成员都可以使用成员的名称访问类中任意的其他成员. ...
- url编码乱码问题解决
//url encodeURI加密 window.location.href = "upload.html?sendName="+encodeURI(sendName); //接收 ...
- SOD框架的Model、连接数据库及增删改查
using PWMIS.DataMap.Entity; using System; using System.Collections.Generic; using System.Linq; using ...
- Python全栈开发记录_第五篇(装饰器)
单独记录装饰器这个知识点是因为这个知识点是非常重要的,必须掌握的(代码大约150行). 了解装饰器之前要知道三个知识点 作用域,上一篇讲到过顺序是L->E->G->B 高阶函数: 满 ...
- Spring 回滚事务@Transactional
@Transactional spring 事务注解 默认遇到throw new RuntimeException("...");会回滚 需要捕获的throw new Exce ...
- zabbix自动发现华为,H3C交换机
一.添加自动发现规则 1.ip范围尽量别太大 zabbix是通过ARP来搜索符合条件的主机的 2.团体名和交换机要一样.这个OID值是提取系统信息的 在OID这块遇到个坑 我用Getif查询到的是1. ...