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. 2019 SDN上机第一次实验作业

    1. 安装轻量级网络仿真工具Mininet 先从GitHub上获取mininet源码,再输入命令进行安装,代码分别如下: git clone https://github.com/mininet/mi ...

  2. Unity制作王者荣耀商业级手游

    <王者荣耀>这种现象级手机游戏是如何制作出来的呢?本文以<王者荣耀>MOBO类型的多人在线战术竞技游戏为入口,覆盖Unity游戏制作开发前端与Node.js服务器端的开发必备知 ...

  3. python的xpinyin模块:汉字转拼音

                            pypinyin 1.安装 pip install pypinyin 2.使用方法 >>> from pypinyin import ...

  4. Docs-.NET-C#-指南-语言参考-预处理器指令:#pragma warning(C# 参考)

    ylbtech-Docs-.NET-C#-指南-语言参考-预处理器指令:#pragma warning(C# 参考) 1.返回顶部 1. #pragma warning(C# 参考) 2015/07/ ...

  5. CVAE-GAN论文学习-1

    CVAE-GAN: Fine-Grained Image Generation through Asymmetric Training 摘要 我们提出了一个变分生成对抗网络,一个包含了与生成对抗网络结 ...

  6. Eclipse下代码字体背景变红/变绿/变黄原因

    如下图所示:不知道怎么,在eclipse IDE手抖按了啥,就成这样了. 后来在stackoverflow提问后,找到了原因.eclipse 有测试代码覆盖率的功能,也就是执行Run——>Cov ...

  7. 报错:java.lang.ClassNotFoundException: com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException

    1.创建mysql_link的时候一定要注意是不是多加了空格: 2.检查Sqoop是否引入了jdbc的jar包.

  8. DNS解析问题

    DNS解析问题,在/etc/resolv.conf文件中加如下一行: nameserver 8.8.8.8 即使用谷歌的域名服务器 如下问题都是DNS解析问题: apt-get update 异常 T ...

  9. Intellij IDEA集成mybatis-generator插件自动生成数据库实体操作类

    Intellij IDEA集成mybatis-generator插件自动生成数据库实体操作类 转载至:https://blog.csdn.net/fishinhouse/article/details ...

  10. Docker:学习笔记(1)——基础概念

    Docker:学习笔记(1)——基础概念 Docker是什么 软件开发后,我们需要在测试电脑.客户电脑.服务器安装运行,用户计算机的环境各不相同,所以需要进行各自的环境配置,耗时耗力.为了解决这个问题 ...