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. 第06组 Alpha冲刺(3/6)

    队名:拾光组 组长博客链接 作业博客链接 团队项目情况 燃尽图(组内共享) 组长:宋奕 过去两天完成了哪些任务 主要完成了用户论坛模块的接口设计 完善后端的信息处理 GitHub签入记录 接下来的计划 ...

  2. Assignment4:闰年判断输入异常时的处理方法

    一.问题描述 在输入界面输入年份,界面返回是否为闰年. 判断依据为:输入的数字可以被4整除但不可以被100整除 || 输入的数字可以被400整除 如果输入为数字以外的其他字符,会抛出异常.那么如何防止 ...

  3. Barman安装及备份PostgreSQL

    barman特点 零数据丢失备份.保证用户在只有一台备份服务器的情况下达到零数据丢失. 与备份服务器合作.允许备份服务器在与主服务器的流式复制不可用时,从barman获取wal文件. 可靠的监控集成. ...

  4. Guided Hacking DLL Injector 3.3

    Guided Hacking DLL Injector 3.3 https://guidedhacking.com/resources/guided-hacking-dll-injector.4/ I ...

  5. 【转】45个实用的JavaScript技巧、窍门和最佳实践

    原文:https://colobu.com/2014/09/23/45-Useful-JavaScript-Tips,-Tricks-and-Best-Practices/ 目录 [−] 列表 第一次 ...

  6. SpringMVC:HandlerInterceptor log 日志

    springMVC:HandlerInterceptor拦截器添加系统日志(权限校验)代码收藏 - LinkcOne - CSDN博客https://blog.csdn.net/qq_22815337 ...

  7. python监控rabbitmq的消息队列数量

    [root@localhost chen]# cat b.py #!/usr/bin/python # -*- coding: UTF-8 -*- import json,time import re ...

  8. openresty开发系列10--openresty的简单介绍及安装

    openresty开发系列10--openresty的简单介绍及安装 一.Nginx优点 十几年前,互联网没有这么火,软件外包开发,信息化建设,帮助企业做无纸化办公,收银系统,工厂erp,c/s架构偏 ...

  9. 三、HTTP响应

    HTTP消息是服务器和客户端之间交换数据的方式 有两种类型的消息: 请求--由客户端发送用来触发一个服务器上的动作 相应--来自服务器的应答 一.HTTP响应的构成 1.状态行 HTTP响应的起始行被 ...

  10. Day3作业:ha_proxy配置文件修改

    不废话,上代码 readme: # Auther:ccorz Mail:ccniubi@163.com Blog:http://www.cnblogs.com/ccorz/ # GitHub:http ...