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. netty原理解析

    netty主要采用的是reactor模式(事件)驱动模型,以下主要对reactor进行总结: C/S架构可以抽象为如下模型: C就是Client(客户端),上面的B是Browser(浏览器) S就是S ...

  2. FPGA调试技巧

    FPGA调试技巧 八月,一直在debug, 编译,查信号,几乎没机会,也没心思停留下来看点东西,静心思考,做点笔记.今天,在硬盘上翻到了保存已久,但一直没想起来读的一本手册.这是我初入职场,决定从硬件 ...

  3. MySQL面试题中:主从同步部署介绍

    主从同步部署1.两台相同版本的mysql数据库,一台做主库,一台从库 主库开启binlog 在配置文件中的[mysqld]模块中添加log-bin=mysql-bin和server-id=1,一定要保 ...

  4. python基础知识5---数据类型、字符编码、文件处理

    阅读目录 一 引子 二 数字 三 字符串 四 列表 五 元组 六 字典 七 集合 八 数据类型总结 九 运算符 十 字符编码 十一 文件处理 十二 作业   一 引子 1 什么是数据? x=10,10 ...

  5. kong api可视化管理工具konga安装

    说明:官网推荐: kong-dashboard,但对比界面高端程度和友好度,更推荐konga.[一个坑]kong版本问题:我在安装时目前kong最新版本已经到1.0.0, 对于konga和kong-d ...

  6. spring声明式事务 同一类内方法调用事务失效(转)

    原文 https://blog.csdn.net/jiesa/article/details/53438342 [问题] Spring的声明式事务,我想就不用多介绍了吧,一句话“自从用了Spring ...

  7. dubbo 在不同协议下携带上下文区别

    如果走原生的dubbo协议,RpcContext.getContext()里的attarchments和values 是能够在节点间传递的 但如果hessian协议,attarchments和valu ...

  8. mybatis与Spring

    提问1:如果没有spring-mybatis,我们如何在spring中使用定义bean,如何使用事务? mybatis-Spring为我们带来多种方式的Mapper接口的注册,扫描,识别. 如果不使用 ...

  9. ubuntu10.04换官方源

    ubuntu10.04LTS官方已经不再维护,导致部分软件.库文件等下载有问题,可换以下源地址解决问题 deb http://old-releases.ubuntu.com/ubuntu lucid ...

  10. MyBatis中使用#和$书写占位符有什么区别?

    #将传入的数据都当成一个字符串,会对传入的数据自动加上引号:$将传入的数据直接显示生成在SQL中.注意:使用$占位符可能会导致SQL注射攻击,能用#的地方就不要使用$,写order by子句的时候应该 ...