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. Linux crontab 定时任务使用

    1.介绍 crond是linux下用来周期性的执行某种任务或等待处理某些事件的一个守护进程: 与windows下的计划任务类似,当安装完成操作系统后,默认会安装此服务工具,并且会自动启动crond进程 ...

  2. 深度学习面试题28:标签平滑(Label smoothing)

    目录 产生背景 工作原理 参考资料 产生背景 假设选用softmax交叉熵训练一个三分类模型,某样本经过网络最后一层的输出为向量x=(1.0, 5.0, 4.0),对x进行softmax转换输出为: ...

  3. Oracle导出/导入数据库的三种模式

    导出 模式一:全量导出(慎用) exp 用户名/密码@数据库实例 owner=用户名 file=文件存储路径 log=日志存储路径 full=y 栗子:exp Mark/123456@151.2.*. ...

  4. tail -f 加过滤功能

    实时查看日志 通过-f参数,我们可以实时查看文件的新增内容: $ tail -f itbilu.log 注意:使用-f参数时不会中断文件监视,需要通过ctrl+c手动结束. 实时日志查看与grep过滤 ...

  5. 关于python 的参数的汇总转

    来自:https://blog.csdn.net/gaotihong/article/details/95687282 版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附 ...

  6. 使用OpenCV(C ++ / Python)进行人脸交换

    -- 图3.面部对齐.左:检测到面部标志和凸包.中:凸包上的点的Delaunay三角剖分.右:通过仿射扭曲三角形进行面部对齐. 1 人脸对齐 1.1 脸部地标检测 两个脸部的几何形状非常不同,因此我们 ...

  7. Swagger 慢

    Swagger 慢 - 国内版 Binghttps://cn.bing.com/search?FORM=U227DF&PC=U227&q=Swagger+%E6%85%A2 rest框 ...

  8. TextFX Notepad++

    textFx Notepad++ - 国内版 Bing https://cn.bing.com/search?FORM=U227DF&PC=U227&q=textFx+Notepad% ...

  9. break 和 continue 的用法

    break 是结束循环 continue 是结束本次循环,接下下一个循环

  10. ISCSI多路径配置(二)

    搭建iscsi存储系统(一) (1).配置ISCSI多路径实现磁盘挂载高可用 如果存储服务器到交换机只有一条线路的时候,那么一条线路出现故障,整个就没法使用了,所以多线路可以解决这个问题,避免单点故障 ...