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. Qt 操作QDomDocument对象修改节点

    版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/liulihuo_gyh/article/d ...

  2. Geometry and Appearances【转】

    https://github.com/AnalyticalGraphicsInc/cesium/wiki/Geometry-and-Appearances Geometry and Appearanc ...

  3. Linux 限制IP——/etc/hosts.allow和/etc/hosts.deny文件【转】

    就像是 限制特定IP来访 想法 看起来通常的做法是利用hosts的拒绝设置,而它的设置是针对某一个具体的进程,具体的服务,在这里就是sshd了 看起来设置一个网段使用的是 x.x.x.0/24 后面加 ...

  4. python PIL/cv2/base64相互转换

    PIL和cv2是python中两个常用的图像处理库,PIL一般是anaconda自带的,cv2是opencv的python版本.base64在网络传输图片的时候经常用到. ##PIL读取.保存图片方法 ...

  5. Java基础 println 输出常量的示例

        JDK :OpenJDK-11      OS :CentOS 7.6.1810      IDE :Eclipse 2019‑03 typesetting :Markdown   code ...

  6. APP:目录

    ylbtech-APP:目录 1.返回顶部   2.返回顶部   3.返回顶部   4.返回顶部   5.返回顶部     6.返回顶部     7.返回顶部   8.返回顶部   9.返回顶部   ...

  7. matlab学习笔记2--matlab的帮助

    一起来学matlab-matlab学习笔记2--matlab的帮助 觉得有用的话,欢迎一起讨论相互学习~Follow Me 参考书籍 <matlab 程序设计与综合应用>张德丰等著 感谢张 ...

  8. Apache2.4+PHP7.2配置站点访问变下载

    问题描述:Apache正常工作,php-fpm正常工作,访问网址就变下载,显然是站点无法正常解析php造成的.php-fpm与apache的通信出现了问题. 解决方案: 如果php-fpm使用的是TC ...

  9. 网络编程之Reactor 模式

    基本的架构是 epoll+线程池. 这篇博文主要从以下几个方面进行阐述: (1)reactor模式的一个介绍:(只要是我的理解) (2)关于线程池的说明. (3)如何将epoll + 池结合起来实现一 ...

  10. mssql的update :from语法

    一条Update更新语句是不能更新多张表的,除非使用触发器隐含更新.而表的更新操作中,在很多情况下需要在表达式中引用要更新的表以外的数据.我们先来讨论根据其他表数据更新你要更新的表 一.MS    S ...