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. MyBatis DTD文件下载地址

    下载链接: http://mybatis.org/dtd/mybatis-3-config.dtdhttp://mybatis.org/dtd/mybatis-3-mapper.dtd

  2. h5课件是什么?h5(html5)怎样实现交互动画开发?-----浅谈h5交互动画课件的优势

    目前很多交互课件,尤其幼儿类的交互课件以动画和交互相结合的类型居多,越来越多的教育机构发现了这种课件对于幼儿的吸引力远大于其他类型的课件,随着flash逐渐被市场淘汰,动画和交互相结合的html5跨平 ...

  3. sdk manager更改国内镜像

    两种方法: 一.参考: https://blog.csdn.net/u010165004/article/details/45227019 打开Android SDK Manager,在Tools下的 ...

  4. java Servlet生成随机验证码

    import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import java.awt.Graphics2D; i ...

  5. DiscuzX2.5,X3.0,X3.1,X3.2完整目录结构【模板目录template】

    /template/default/common  公共模板目录全局加载 block_forumtree.htm  DIY论坛树形列表模块 block_thread.htm  DIY帖子模块调用文件 ...

  6. python基础知识6---文件处理

    阅读目录 一 文件操作 二 打开文件的模式 三 操作文件的方法 四 文件内光标移动 五 文件的修改   一 文件操作 一 介绍 计算机系统分为:计算机硬件,操作系统,应用程序三部分. 我们用pytho ...

  7. VSS2005源代码管理启用http方式

    一直在使用vss管理源代码,在服务器上使用文件共享当方式.最近安全形式升级,禁止使用文件共享,因此要升级到http方式. 按照网上的教程,一路前行. 1.登录服务器桌面,打开vss administr ...

  8. PyCharm激活(License server)

    打开激活窗口 选择 Activate new license with: License server (用license server 激活) 在 License sever address 处填入 ...

  9. 7.2 if else 语句

    7.2 if else 语句 if else语句的通用形式是: if ( expression ) statement1 else statement2 如果expression为真(非0),则执行s ...

  10. CentOS_6.5配置iptables防火墙策略

    ###############配置filter表防火墙############### #清除预设表filter中的所有规则链的规则iptables -F #清除预设表filter中使用者自定链中的规则 ...