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. JavaScript 学习笔记(基础学习)

    一:来自W3School工具的学习 1:document.getElementById(id) : 访问某个标签的元素,然后对它进行操作 .innerHTML 对其内容进行修改 2:document. ...

  2. nginx ssl通讯优化思路

    TLS通讯过程中主要做的两件事情: 1.交换密钥 2.加密数据 如果优化的话,主要也是从这两个点来考虑优化: 1.nginx 打开session cache 如一天内不需要再次协商密钥. 2.小文件较 ...

  3. 浏览器端使用javascript调用腾讯翻译api

    最近在学习的小玩意,发现腾讯的文档十分坑爹,里面有很多错误的指示. 不过腾讯的机器翻译还是很牛的,我觉得翻译水准比谷歌好很多. 腾讯的机器翻译貌似在试用阶段,不收费,用QQ或微信登录即可申请使用. 首 ...

  4. Linux环境下使用Android NDK编译c/c++生成可执行文件

    1.安装Android NDK至Linux(Lubuntu 16) 从网上下载 android-ndk-r13b-linux-x86_64.zip,本人将其解压至/home/guanglun/work ...

  5. Solr4.7.0连接PostgreSQL

    1.把PostgreSQL的Jar包  例如:postgresql-9.1-901-1.jdbc4.jar  或其他版本 放到D:\apache-tomcat-7.0.57\webapps\solr\ ...

  6. 学习笔记《Java多线程编程实战指南》三

    3.1串行.并发与并行 1.串行:一件事做完接着做下一件事. 2.并发:几件事情交替进行,统筹资源. 3.并行:几件事情同时进行,齐头并进,各自运行直到结束. 多线程编程的实质就是将任务处理方式由串行 ...

  7. 二、初步认识springBoot的pom.xml

    1.  大体结构 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www. ...

  8. mybatis缓存的设计

    继续用提问的方式来看Mybatis的缓存设计. 1.Mybatis如何开启缓存 Mybatis对查询结果进行缓存,所以缓存的对象为具体的Statement 通过在Statement上是否使用缓存来启用 ...

  9. 数据泵导出报ORA-01555 ORA-22924

    最近对某数据库执行数据泵导出操作时碰到如下错误:Processing object type DATABASE_EXPORT/SCHEMA/JOBProcessing object type DATA ...

  10. [SQL]事务回滚详解及示例

    存储过程中的 SET XACT_ABORT ON 和事务 在存储过程中写SET XACT_ABORT ON 有什么用? SET XACT_ABORT ON是设置事务回滚的! 当为ON时,如果你存储中的 ...