安装vue-scroller

npm i vue-scroller -D

在main.js中:

import VueScroller from 'vue-scroller'
Vue.use(VueScroller)
 
主要是两个方法::on-refresh="refresh"下拉刷新回调   :on-infinite="infinite"上拉加载回调
<scroller 
  :on-refresh="refresh"
  :on-infinite="infinite">
  <!-- content goes here     这里写需要下拉刷新,上拉加载的元素,最好是单个元素,多个元素拉动时会出现小bug-->
</scroller>
 
如:
<template>
  <div id="main">
    <div class="header">xxxx</div>
    <div class="scrollerBox">
      <scroller class="scroller" :on-infinite="infinite"//上拉加载的回调函数
                 :on-refresh="refresh"//下拉刷新的回调函数
                 :noDataText="'上拉加载更多数据''//上拉加载结束时,显示的文字
                 refresh-layer-color="red"//下拉刷新的文字颜色
                 loading-layer-color="red"//上拉加载的文字颜色
                 ref="myscroller">
        <div class="content">xxx</div>
      </scroller>
    </div>
    <div class="footer">底部</div>
  </div>
</template>
scroller外部最好用一个元素包裹,将头部和底部位置留出来,scroller里面的元素不要订高,height:100%;不会生效,只有固定px高度才会生效,不过这个元素里面需要上拉加载新东西,所以不要订高
methods中写入infinite   和  refresh两个方法
 
infinite() {//上拉加载
  let self = this;
  let start = this.moveList.length;
  setTimeout(() => {
    for(let i = 0; i < 2; i++) {
      if(start>=11){
        self.$refs.myscroller.noDataText="没有更多数据了"//更改上拉加载的文字
        self.$refs.myscroller.finishInfinite(true);
        return
      }
      self.moveList.push(i)//这是在data里的一个数组
    }
  }, 1500)
  setTimeout(()=>{
    this.$refs.myscroller.finishInfinite(true);//停止上拉加载的动效,出现没有“"没有更多数据了”的提示,当传里面的布尔值代表isNoMoreData :Boolean,是否没有更多数据,true:没有更多数据,false:还有数据,至于有什么区别,传一下对比一下就行了
  },1000)
},
 
refresh() {//下拉刷新
  var self=this;
  console.log('refresh');
  setTimeout(function(){
    self.$refs.myscroller.finishPullToRefresh();//停止下拉刷新动效
  },1500)
}
 
上面是一个简单的demo
下面奉上官方api网址:
https://www.npmjs.com/package/vue-scroller

vue-scroller的使用 实现下拉刷新 上拉加载初始效果的更多相关文章

  1. Android 下拉刷新上啦加载SmartRefreshLayout + RecyclerView

    在弄android刷新的时候,可算是耗费了一番功夫,最后发觉有现成的控件,并且非常好用,这里记录一下. 原文是 https://blog.csdn.net/huangxin112/article/de ...

  2. SwipeRefreshLayout实现下拉刷新上滑加载

    1. 效果图 2.RefreshLayout.java package myapplication.com.myapplication; import android.content.Context; ...

  3. 移动端下拉刷新上拉加载-mescroll.js插件

    最近无意间看到有这么一个上拉刷新下拉加载的插件 -- mescroll.js,个人感觉挺好用的,官网地址是:http://www.mescroll.com 然后我就看了一下文档,简单的写了一个小dem ...

  4. vue mint-ui 框架下拉刷新上拉加载组件的使用

    安装 npm i mint-ui -S 然后在main.js中引入 import MintUI from 'mint-ui' import 'mint-ui/lib/style.css' Vue.us ...

  5. react-native 自定义 下拉刷新 / 上拉加载更多 组件

    1.封装 Scroller 组件 /** * 下拉刷新/上拉加载更多 组件(Scroller) */ import React, {Component} from 'react'; import { ...

  6. mui下拉刷新上拉加载

    新外卖商家端主页订单大厅页面 使用mui双webview,实现下拉刷新上拉加载 主页面: order_index.html <!doctype html> <html> < ...

  7. 带你实现开发者头条APP(五)--RecyclerView下拉刷新上拉加载

    title: 带你实现开发者头条APP(五)--RecyclerView下拉刷新上拉加载 tags: -RecyclerView,下拉刷新,上拉加载更多 grammar_cjkRuby: true - ...

  8. ListView实现Item上下拖动交换位置 并且实现下拉刷新 上拉加载更多

    ListView实现Item上下拖动交换位置  并且实现下拉刷新  上拉加载更多 package com.example.ListViewDragItem; import android.app.Ac ...

  9. [ionic开源项目教程] - 第7讲 实现下拉刷新上拉加载ion-refresher和ion-infinite-scroll

    第7讲 实现下拉刷新上拉加载ion-refresher和ion-infinite-scroll 1.将tab1.html的代码改为如下: <ion-content> <ion-ref ...

  10. JS+CSS实现的下拉刷新/上拉加载插件

    闲来无事,写了一个当下比较常见的下拉刷新/上拉加载的jquery插件,代码记录在这里,有兴趣将代码写成插件与npm包可以留言. 体验地址:http://owenliang.github.io/pull ...

随机推荐

  1. iptables常用规则

    删除现有规则 iptables -F (OR) iptables --flush 设置默认链策略 iptables的filter表中有三种链:INPUT, FORWARD和OUTPUT.默认的链策略是 ...

  2. WP8.1学习系列(第十七章)——Windows Phone重要图形、视觉指示器和通知

    美感在手机应用中是不可或缺的,它是直观操作的代名词.在 Windows Phone 中,你的磁贴.初始屏幕.图标.控件和导航的视觉元素会引起用户对应用程序内的相关任务.优先事项或操作的注意,并采用新颖 ...

  3. Ubuntu16.04安装Mono、MonoDevelop运行C#代码

    Ubuntu16.04安装MonoDevelop运行C#代码 在Ubuntu上安装Mono 运行下面代码授权注册repo源并更新软件列表: Add the Mono repository to you ...

  4. 为android编译libsocket的脚本

    #!/bin/bash U32=0 #编译64位arm时 U32=0   编译32位arm时 U32=1 其他参数不需要变动 TARGET=android-24 HOST=darwin-x86_64 ...

  5. ubuntu14.04_install_gitlab_platform

    /** author: lihaibo URL:http://www.cnblogs.com/horizonli/p/5321770.html */ 下面是干货 [第一部分 安装] 环境:ubuntu ...

  6. github命令行下载项目源码

    一.git clone [URL] 下载指定ur的源码 $ git clone https://github.com/jquery/jquery 二.指定参数, -b是分支, --depth 1 最新 ...

  7. window7下 cocos2dx android交叉编译环境部署小结

    上周被android交叉编译搞惨了,还好最后弄好了,写个小结以后备用吧. 步骤,1.下载cygwin的devel和shells模块 2. 2.设置环境变量 a.设置NDK_ROOT b.设置Path ...

  8. Instrumentation 两种方法 premain Agent

    由于jvm内部的限制Instrumentation 只能修改方法体 不能动态添加删除方法(安全第一吧!!!!) Premain 对于使用命令行接口的实现,可以将以下选项添加到命令行来启动代理: -ja ...

  9. thinkCMF----自定义配置调用

    有些时候,需要在后台给网站一些其他的配置: 这个配置,一般都是通过修改代码实现的,ThinkCMF本身没有这个配置: 找到site.html 增加一个Group就可以: 在配置里面做相应的配置就可以:

  10. AppScan扫描建议 问题集

    1.1        AppScan扫描建议 若干问题的补救方法在于对用户输入进行清理. 通过验证用户输入未包含危险字符,便可能防止恶意的用户导致应用程序执行计划外的任务,例如:启动任意 SQL 查询 ...