1.安装:

npm i vue-scroller -S

npm install vue-scroller -D

2.在需要加载的页面中引入,或在公共js文件中引入:

import VueScroller from 'vue-scroller'

Vue.use(VueScroller)

3.在模板中使用:

<scroller :on-refresh="refresh" :on-infinite="infinite" > </scroller>

:on-refresh:下拉刷新 :on-infinite:上拉加载

另一种在模板中的用法:

<!-- 下拉的代码段:使用VuePullRefresh标签嵌套 :on-refresh="onRefresh"表示下拉时要执行的方法
method:{onRefresh:function(){}} -->
<VuePullRefresh :on-refresh="onRefresh">
  <!-- 使用v-for更新已渲染过的元素列表 为防止v-for报错, 一定要v-bind绑定key key是唯一的,指向列表中每个元素的唯一值 -->
  <div class="info url log" v-for="(item,index) in moreListData" :key="index">
  <div class="poster">
  <img :src="item.pic_big" :alt="item.title">
  </div>
  <div class="text-wrap">
  <div class="title">{{ item.title }}</div>
  <div class="author">{{ item.artist_name }}</div>
  </div>
  </div>
</VuePullRefresh>

  

vue 下拉刷新数据的插件的使用:的更多相关文章

  1. javascript+html5+css3下拉刷新 数据效果

    文章摘自:suchso.com/projecteactual/javascript-html5-css3-taobao-xiala-data.html segmentfault.com/a/11900 ...

  2. mui实现分页上拉加载更多 下拉刷新数据的简单实现 移动端下拉上拉

    空下来把mui上拉加载更多,下拉刷新数据做了一个简单的实现,希望可以帮助到需要的朋友 demo项目的结构 <!DOCTYPE html> <html> <head> ...

  3. vue 下拉刷新实现

    [手动实现下拉刷新]可以用vue-pull-refash 插件代替 //下拉刷新 let scroll = this.$ref.scroll // 获取当前要拖拽的元素 let top = scrol ...

  4. vue 下拉刷新 上拉加载(vue-scroller)

    <template> <div class="wdRecordCon"> <x-header :left-options="{backTex ...

  5. 用mescroll实现无限上拉增加数据,下拉刷新数据 (学习笔记)

    最近自己做一个web app需要用到上拉查询下页数据,网上看了很多很多帖子,发现并不能快速的套用,总是会出现各种问题无法使用,于是无奈自己跑去看了官方api文档,终于做了出来,至此做个笔记,以后用到可 ...

  6. Vue下拉刷新组件

    Examples examples Installation npm install vue-pull-to --save Use Setup <template> <div> ...

  7. 手机端原生js实现下拉刷新数据

    HTML结构如下: <div class="outerScroller comment"> <div class='scroll comment'> < ...

  8. Vue Scroller:Vue 下拉刷新及无限加载组件

    Vue Scroller Vue Scroller is a foundational component ofVonic UI. In purpose of smooth scrolling, pu ...

  9. Vue 下拉刷新及无限加载组件

    原文  https://github.com/wangdahoo/vue-scroller 主题 Vue.js Vue Scroller Vue Scroller is a foundational ...

随机推荐

  1. 机器不学习:CNN入门讲解-为什么要有最后一层全连接

    哈哈哈,又到了讲段子的时间 准备好了吗? 今天要说的是CNN最后一层了,CNN入门就要讲完啦..... 先来一段官方的语言介绍全连接层(Fully Connected Layer) 全连接层常简称为 ...

  2. SetThreadAffinityMask windows下绑定线程(进程)到指定的CPU核心

    原帖地址:https://www.cnblogs.com/lvdongjie/p/4476766.html 一个程序指定到单独一个CPU上运行会比不指定CPU运行时快.这中间主要有两个原因:1)CPU ...

  3. [转]Myeclipse之web项目的部署(发布)流程

    在myeclipse下新建web工程abc.系统设置默认如下: 项目保存位置:workspace目录\abc Source文件夹:src,保存所有的java类文件(.java文件)和xml文件. We ...

  4. jsch连接sftp后连接未释放掉问题排查

    项目中通过jsch中的sftp实现上传下载文件.在压测过程中,由于调用到sftp,下载文件不存在时,系统不断抛出异常,内存飙升,逐渐把swap区也占满,通过top监控未发现占用内存的进程,通过查找ss ...

  5. 京东HBase平台进化与演进

    https://mp.weixin.qq.com/s/7_dxrqFWwIJxNtL9-xD6FA

  6. Tosca :配置环境参数

    # 跟Modules TestCases并列 ,右键创建 #再右键创建配置(结构自己安排) #再创建配置参数 #使用配置参数 #引用配置的环境参数

  7. [转]java生成 excel 并导出文件

    原文:https://blog.csdn.net/xunwei0303/article/details/53213130 目前,比较常用的实现Java导入.导出Excel的技术有两种Jakarta P ...

  8. sql 获取某一时段中每一天中最大的时间的一条记录

    SELECT *FROM ( SELECT ROW_NUMBER() OVER( PARTITION BY CONVERT(CHAR(10), DataTime, 120) ORDER BY Data ...

  9. Flink 物理分区

    本文来自官网: https://ci.apache.org/projects/flink/flink-docs-release-1.9/dev/stream/operators/#physical-p ...

  10. html的输出&,空格,大小于号

    最近定做安装程序,因为这次定做名字里有&符号,用微软的txt文本打开配置文件,在配置文件里修改了名称,名称在文本里显示正常,但是定做出来后,发现&符号变成了_下划线,在本来的& ...