vue 下拉刷新数据的插件的使用:
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 下拉刷新数据的插件的使用:的更多相关文章
- javascript+html5+css3下拉刷新 数据效果
文章摘自:suchso.com/projecteactual/javascript-html5-css3-taobao-xiala-data.html segmentfault.com/a/11900 ...
- mui实现分页上拉加载更多 下拉刷新数据的简单实现 移动端下拉上拉
空下来把mui上拉加载更多,下拉刷新数据做了一个简单的实现,希望可以帮助到需要的朋友 demo项目的结构 <!DOCTYPE html> <html> <head> ...
- vue 下拉刷新实现
[手动实现下拉刷新]可以用vue-pull-refash 插件代替 //下拉刷新 let scroll = this.$ref.scroll // 获取当前要拖拽的元素 let top = scrol ...
- vue 下拉刷新 上拉加载(vue-scroller)
<template> <div class="wdRecordCon"> <x-header :left-options="{backTex ...
- 用mescroll实现无限上拉增加数据,下拉刷新数据 (学习笔记)
最近自己做一个web app需要用到上拉查询下页数据,网上看了很多很多帖子,发现并不能快速的套用,总是会出现各种问题无法使用,于是无奈自己跑去看了官方api文档,终于做了出来,至此做个笔记,以后用到可 ...
- Vue下拉刷新组件
Examples examples Installation npm install vue-pull-to --save Use Setup <template> <div> ...
- 手机端原生js实现下拉刷新数据
HTML结构如下: <div class="outerScroller comment"> <div class='scroll comment'> < ...
- Vue Scroller:Vue 下拉刷新及无限加载组件
Vue Scroller Vue Scroller is a foundational component ofVonic UI. In purpose of smooth scrolling, pu ...
- Vue 下拉刷新及无限加载组件
原文 https://github.com/wangdahoo/vue-scroller 主题 Vue.js Vue Scroller Vue Scroller is a foundational ...
随机推荐
- qt 单例程序
1.http://qt.nokia.com的网站把QtSingleApplication 的源代码qtsingleapplication-2.6_1-opensource.zip 下载下来,然后解压缩 ...
- Oracle的存储的三大物理文件
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 一. ...
- Python中if __name__ == '__main__':的作用和原理
if __name__ == '__main__':的作用 一个python文件通常有两种使用方法,第一是作为脚本直接执行,第二是 import 到其他的 python 脚本中被调用(模块重用)执行. ...
- Centos 安装 nginx 特定版本
CentOS 6.9/7通过yum安装指定版本的Nginx - EasonJim - 博客园https://www.cnblogs.com/EasonJim/p/9020896.html [root@ ...
- CentOS / RHEL 7 更改时区
timedatectl 是 RHEL7 上的一项新功能.它可用于查询和更改系统时钟及其设置. 按照以下步骤将时区更改为中国.(以root用户身份执行以下命令). 1.使用以下命令列出所有可用的时区.你 ...
- C++11智能指针之std::unique_ptr
C++11智能指针之std::unique_ptr uniqut_ptr是一种对资源具有排他性拥有权的智能指针,即一个对象资源只能同时被一个unique_ptr指向. 一.初始化方式 通过new云 ...
- MFC加载osg模型
创建MFC单文档项目, OSGObject.h #pragma once #include <osgViewer\Viewer> #include <osgDB\ReadFile&g ...
- osg Error osgearth_viewerd fails with "Loaded scene graph does not contain a MapNode
void StateSet::setGlobalDefaults() ShaderPipeline disabled.void StateSet::setGlobalDefaults() Shader ...
- RabbitMQ 入门教程(PHP版) 第三部分:发布/订阅(Publish/Subscribe)
发布/订阅 在上篇第二部分教程中,我们搭建了一个工作队列.每个任务之分发给一个工作者(worker).在本篇教程中,我们要做的之前完全不一样——分发一个消息给多个消费者(consumers).这种模式 ...
- 敏感信息直接在 nginx 通过环境变量设置
通常我们在维护PHP线上项目的时候,为了隔离配置和代码,会使用fastcgi_param的形式将环境变量定义在Nginx的配置文件中(Apache可以使用SetEnv指令).这样在PHP-FPM运行过 ...