元旦了,给手残党直接复制的机会,代码如下:

1. :style="{'-webkit-overflow-scrolling': scrollMode}" 最外层div设置,以便兼容;

2. data 设置

3. loadTop 定义下拉刷新函数

4. loadBottom 定义上拉加载函数

5. 查询数据

关键一点根据后台返回的总也页面判断出是否还有下一页(当前页是否大于总页数)

6.更多信息和是否有下一页函数


测试完美运行

现在增加了bottomStatus ,之前统一用的topStatus,感觉不是很好。还是单独区分一下吧。

更新:2019/09/10

完整源码请看本人另一篇博客: https://www.cnblogs.com/panax/p/11806913.html

在vue中运用mt-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. 微信小程序上拉加载下拉刷新

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

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

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

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

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

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

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

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

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

  9. zepto.js + iscroll.js上拉加载 下拉加载的 移动端 新闻列表页面

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...

  10. 利用iscroll实现上拉加载下拉刷新

    1.首先引用isScroll插件 说明:页面加载时初始化isScroll,然后调用pullDownAction()和pullUpAction(),每次切换tab时,只需要对pullDownAction ...

随机推荐

  1. python基础【第五篇】

    python第三节 1.整型及布尔值 1.1 进制转换 十进制 ----二进制 二进制 ----十进制 8421方法与普通计算 python中十进制转二进制示例:bin(51)>>> ...

  2. node js 函数和对象

    1.函数 1.1匿名函数 函数声明 function fn(){  } 函数表达式 var fun=function(){  } 函数名称和函数名称()的区别 fun/fn   fun()/fn() ...

  3. void v.s. void *

    在學校老師一定都會教void是無型態的返回值例如 void swap(int *a, int *b){      int temp = *a;      *a = *b;      *b = temp ...

  4. Optional int parameter 'pId' is present but cannot be translated into a null value due to being declared as a primitive type.

    接口测试的时候遇到了一个问题,导致测试阻断了好久,在此记录,谨防忘记. 具体报错如下: Optional int parameter 'pId' is present but cannot be tr ...

  5. 循序渐进学.Net Core Web Api开发系列【17】:.Net core自动作业之Hangfire

    nuget搜索:Hangfire 安装即可,这里我选择的是 1.7.0-beta1 版本 我是用这个集成到了 mvc api里 这里需要在 Startup 文件里进行如下配置 在配置方法 Config ...

  6. PyCharm与git/GitHub取消关联

    如果你从github 上down下的个项目,用pycharm 打开的时候,选择了git管理,导致你只要做了修改,就会有颜失标记,即使没有强迫症,看着也很难受啊 聪敏的我赶快找度娘,总结如下解决方法 在 ...

  7. JAVA计算整数的位数

    /** * 计算整数的位数 * @param x * @return */ public static int countIntegerLength(int x){ final int [] size ...

  8. LinkButton(按钮)组件

    一.//class加载方式 <div id="pos" class="easyui-linkbutton">按钮</div> 二.js加 ...

  9. offset 、 client 和 scroll - PC端网页特效

    1.元素偏移量  offset 系列 1.1 offset 就是偏移量,使用 offset 系列相关属性可以 动态 得到该元素的位置(偏移).大小等. 注意: 1.获得元素距离带有定位父元素的位置 2 ...

  10. Input标签文件上传,使用详解

    1.html添加标签按钮 <button ion-button (click)="selectVideo()">添加</button> <input ...