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(上拉加载,下拉刷新)的更多相关文章

  1. Vue mint ui用在消息页面上拉加载下拉刷新loadmore 标记

    之前总结过一个页面存在多个下拉加载的处理方式,今天再来说一下在消息页面的上拉加载和下拉刷新,基本上每个app都会有消息页面,会遇到这个需求 需求:每次加载十条数据,上拉加载下拉刷新,并且没有点击查看过 ...

  2. 上拉加载下拉刷新控件WaterRefreshLoadMoreView

    上拉加载下拉刷新控件WaterRefreshLoadMoreView 效果: 源码: // // SRSlimeView // @author SR // Modified by JunHan on ...

  3. RecyclerView 上拉加载下拉刷新

    RecyclerView 上拉加载下拉刷新 <android.support.v4.widget.SwipeRefreshLayout android:id="@+id/teach_s ...

  4. APICloud上啦加载下拉刷新模块

    apicloud有自带的上啦加载下拉刷新,当让也可以用第三方或者在模块库里面找一个使用 一.下拉刷新,一下代码写在 apiready = function (){} 里面 apiready = fun ...

  5. 微信小程序上拉加载下拉刷新

    微信小程序实现上拉加载下拉刷新 使用小程序默认提供方法. (1). 在xxx.json 中开启下拉刷新,需要设置backgroundColor,或者是backgroundTextStyle ,因为加载 ...

  6. mui scroll和上拉加载/下拉刷新

    mui中 scroll和上拉加载/下拉刷新同时存在会出现两个滚动条 把/*   */ /* //mui页面鼠标拖动代码: mui('.mui-scroll-wrapper').scroll({ dec ...

  7. 基于better-scroll封装一个上拉加载下拉刷新组件

    1.起因 上拉加载和下拉刷新在移动端项目中是很常见的需求,遂自己便基于better-scroll封装了一个下拉刷新上拉加载组件. 2.过程 better-scroll是目前比较好用的开源滚动库,提供很 ...

  8. Flutter上拉加载下拉刷新---flutter_easyrefresh

    前言 Flutter默认不支持上拉加载,下拉刷新也仅仅支持Material的一种样式.Android开发使用过SmartRefreshLayout的小伙伴都知道这是一个强大的刷新UI库,集成了很多出色 ...

  9. XListView实现上拉加载下拉刷新

    package com.loaderman.androiddemo; import android.content.Context; import android.util.AttributeSet; ...

  10. SwipeRefreshLayout实现上拉加载下拉刷新

    package com.example.swiperefreshlayoutdemo; import java.util.ArrayList;import java.util.HashMap; imp ...

随机推荐

  1. nginx 配置说明

    ======nginx 配置文件分开==== http://blog.csdn.net/baple/article/details/44197981 1.备份现在有nginx.conf2.复制ngin ...

  2. Unity 中实现粒子系统的 LOD

    模型的 LOD 比较简单,直接使用 Unity 提供的组件 LODGroup 挂到模型物体上,然后分别指定不同 LOD 级别的 Renderer 即可. LODGroup 并不是用距离来控制 LOD, ...

  3. python3-基础1

    eval()  --- 返回表达式计算结果 实际上就是把括号中的命令提取出来执行一遍. eval("print('ok')") ok 可变类型: 在ID不变的情况下,value可变 ...

  4. mybatis的逆向工程和中文注解

    由于MyBatis Generator自带了生成注释的功能,但是,是英文的而且生成的根本无法理解,所以可以通过,修改他的源码来实现生成中文的注释,具体方式有以下几种: 1) 自定义CommentGen ...

  5. docker整理

    Docker的简单介绍 docker是什么 Docker 最初是 dotCloud 公司创始人 Solomon Hykes 在法国期间发起的一个公司内部项目,于 2013 年 3 月以 Apache ...

  6. [UE4]VR手柄按键参考

    一.VR手柄按键 二.Gamepad菜单往下拉 三.Shouder Button,在一般游戏当中是用作菜单键,按一下Shouder Button会出现游戏菜单. 四.Face Buttons:可以触摸 ...

  7. linux杂记

    find [path] -name fileName find /home/audio/mrcp-asr/audio -type f -newermt '2019-04-23 00:00' ! -ne ...

  8. Linux常用的命令以及配置

    cat /etc/group nobody:x:500:用户组 : 口令 : 用户组编号 #查看用户信息 stunnel4:x:118:123::/var/run/stunnel4:/usr/sbin ...

  9. Allegro16.6 PCB 导入DXF 外框后曲线不闭合

    Allegro16.6 PCB 导入DXF  外框后曲线不闭合,边框不封闭导致的z-copy无法用的问题.解决办法: 菜单栏依次选择 shape--compose shape,options选择好ou ...

  10. 安卓ndk 忽略 error: undefined reference to '找不到符号

    最近在搞天使之翼的mrp模拟器... 移到AndroidStudio了,现在想把原来的Android .mk那种方式的改成cmake的方式编译,但是编译时有一些符号找不到. undefined ref ...