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 对象属性底层原理

    对象属性类型 1. 数据属性 [[Configurable]]:表示能否通过delete删除属性从而重新定义属性,能否修改属性的特性,或者能否把属性修改为访问器属性,特性默认值为true [[Enum ...

  2. listener.starting()源码探究

    容器启动时,监听器调用starting方法,本质是找到匹配的监听器,广播事件,开始监听 上节对寻找匹配监听器做了分析,其是这个过程比较重要的部分,本文开始监听,反而不是那么复杂,如下: 找匹配监听器就 ...

  3. Java Exception 和Error

    (事先声明:该文章并非完全是我自己的产出,更多的是我个人在看到资料后通过理解并记录下来,作为自己阅读后的一个笔记:我现在试图对自己多年工作中的知识点做一个回顾,希望能融会贯通) (此文参考<Ja ...

  4. (引用)!Unicode,GBK以及UTF8的联系和区别

    在实现单片机显示汉字的操作时,了解到有关汉字编码的相关概念. Unicode是一种字符集,该字符集可以涵盖世界上所有的语言.最常见的字符集是ASC II-0~127(0x00~0x7f).Unicod ...

  5. Ubuntu16.04安装Python3.6 和pip(python3 各版本切换)

    安装: sudo add-apt-repository ppa:jonathonf/python-3.6 sudo apt-get update sudo apt-get install python ...

  6. Jquery Mobile 让错误提示可在后台控制显示内容

    在jquery.mobile-1.4.5.min.js的5254行找到下面代码 return $.proxy(function( xhr, textStatus, errorThrown ) { 然后 ...

  7. note 9 列表、时间复杂度、排序

    列表 List +内建(built-in)数据结构(data structure),用来存储一系列元素(items) 如:lst = [5.4,'hello',2] 前向索引.后向索引.切片.拼接.成 ...

  8. WebApi设置HttpContext.Current.User

    1.Web.config配置上system.web节点下加入以下配置 <system.web> <authentication mode="Forms"> ...

  9. gevent-websocket初识

    初试 from flask import Flask, request from geventwebsocket.handler import WebSocketHandler from gevent ...

  10. dns相关

    一 用于dns, whois相关的网站 1 http://viewdns.info/iphistory 2 http://bgp.he.net/ 3 https://whois.aliyun.com/ ...