安装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. Unity Shader 自定义纹理坐标变量写法

    Properties { _R(,)) = 1.0 _ColorTex("ColorTex (RGB)", 2D) = "red" {} struct Inpu ...

  2. U3D功能脚本备忘

    编译器属性 属性 介绍 用例 AddComponentMenu 在Component菜单中添加新的菜单项 [AddComponentMenu("Duan/Script/TestScript& ...

  3. mysql5.6.34-debug Source distribution在树莓派下编译的几个错误

    raspberrypi下编译mysql5.6 debug版源码. 1. 启动错误 和mysqld相关的文件及文件夹权限必须设置为mysql用户可读可写可执行,特别是/var/run/mysqld/目录 ...

  4. 在wepy里面使用redux

    wepy 框架本身是支持 Redux 的,我们在构建项目的时候,将 是否安装 Redux 选择 y 就好了,会自动安装依赖,运行项目后看官方给的 demo 确实是可以做到的,但是官方文档里却对这一块只 ...

  5. jQuery Easing 动画效果扩展--使用Easing插件,让你的动画更具美感。

    jQuery  Easing 是一款比较老的jQuery插件,在很多网站都有应用,尤其是在一些页面滚动.幻灯片切换等场景应用比较多.它非常小巧,且有多种动画方案供选择,使用简单,而且免费. 引入Eas ...

  6. linux系统环境搭建

    一.安装jdk 参考帖子 用yum安装JDK(CentOS) 1.查看yum库中都有哪些jdk版本 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 [r ...

  7. 脚本学习 game.sh

    #!/bin/bash #game_error.sh ]]; then #$#表示参数个数 -lt小于 echo "Usage: game_error.sh time[20170710]&q ...

  8. c++11 delete禁用函数

    c++11添加了delete关键字. 不想用那个函数,在那个函数后面加 = delete就可以了: 比如: 在函数重载中,可用 delete 来滤掉一些函数的形参类型,如下: bool IsLucky ...

  9. URI Scheme注册伪协议实现远程命令执行

    Windows配置注册表注册伪协议 1.新建伪协议项 WIN+R 输入regedit 打开注册表,在注册表HKEY_CLASSES_ROOT键中新建一个项,项的名字就是你伪协议的名字,例如我注册一个c ...

  10. 【黑金原创教程】【FPGA那些事儿-驱动篇I 】实验十九:SDRAM模块② — 多字读写

    实验十九:SDRAM模块② — 多字读写 表示19.1 Mode Register的内容. Mode Register A12 A11 A10 A9 A8 A7 A6 A5 A4 A3 A2 A1 A ...