安装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. Empire安装和试用

    Empire2.0,powershell后渗透利器的安装和试用 https://www.restkhz.com/2017/05/empire-test/ 使用Empire“探索”Windows个人电脑 ...

  2. 【译】Kafka最佳实践 / Kafka Best Practices

    本文来自于DataWorks Summit/Hadoop Summit上的<Apache Kafka最佳实践>分享,里面给出了很多关于Kafka的使用心得,非常值得一看,今推荐给大家. 硬 ...

  3. 说说C与汇编之间的互相联系(转)

    在嵌入式系统开发中,目前使用的主要编程语言是C和汇编,C++已经有相应的编译器,但是现在使用还是比较少的.在稍大规模的嵌入式软件中,例如含有OS,大部分的代码都是用C编写的,主要是因为C语言的结构比较 ...

  4. 深入浅出MFC——Document-View深入探讨(五)

    1. MFC之所以为Application Framework,最重要的一个特征就是它能够将管理数据的程序代码和负责数据显示的程序代码分离开来,这种能力由MFC的Document/View提供.Doc ...

  5. 敏捷开发中的Scrum流程和术语【转】

    任何人力流程都离不开人来执行,所以在讲解Scrum流程之前,有必要先把Scrum中的角色讲一下. 一天,一头猪和一只鸡在路上散步,鸡看了一下猪说,“嗨,我们合伙开一家餐馆怎么样?”,猪回头看了一下鸡说 ...

  6. iOS - 选取相册中iCloud云上图片和视频的处理

    关于iOS选取相册中iCloud云上图片和视频  推荐看:TZImagePickerController的源码,这个是一个非常靠谱的相册选择图片视频的库 .当然也可以自己写 如下遇到的问题 工作原因, ...

  7. Win8交互UX——用于 Windows 的触摸交互

    用于 Windows 的触摸交互   Windows 8.1 提供一组在整个系统中使用的简单触摸交互功能.一致地应用此触摸语言可让用户对你的应用感觉已经很熟悉.通过让你的应用更容易学习和使用,可提高用 ...

  8. 为什么有这么多 Python版本

    Python是出类拔萃的 然而,这是一句非常模棱两可的话.这里的"Python"到底指的是什么? 是Python的抽象接口吗?是Python的通用实现CPython吗(不要把CPy ...

  9. css方法 - 移动端h5在iphonex的适配

    @media only screen and (device-width:375px) and (device-height:812px) and (-webkit-device-pixel-rati ...

  10. html5里面的延迟加载属性

    html5中给script标签引入了 async 和 defer 属性. 原理:带有async属性的script标签,会在浏览器解析时立即下载脚本同时不阻塞后续的document渲染和script加载 ...