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 ...
 
随机推荐
- vim 替换所有字符串
			
将dev 替换 为 prod: :%s/dev/prod/g
 - MVC框架的主要问题是什么?
			
以下是MVC框架的一些主要问题: 对 DOM 操作的代价非常高 程序运行缓慢且效率低下 内存浪费严重 由于循环依赖性,组件模型需要围绕 models 和 views 进行创建
 - 高通平台打开 dynamic debug方法【学习笔记】
			
一.首先在内核的配置文件添加如下的配置: CONFIG_DEBUG_FS=y CONFIG_DYNAMIC_DEBUG=y 二.找到自己平台对应的 device/qcom/xxxx/init.targ ...
 - iis网站搭建http访问的文件服务器
			
1.首先打开Internet信息服务(IIS)管理器,选择新建网站,如果没有Internet信息服务(IIS)管理器,可以在控制面板添加,按照 控制面板\程序\程序和功能,点击 打开或关闭Window ...
 - chrome 等浏览器不支持本地ajax请求,的问题
			
XMLHttpRequest cannot load file:///D:/WWW/angularlx/ui-router-test/template/content.html. Cross orig ...
 - http://man7.org/linux/man-pages/man2/epoll_wait.2.html
			
https://segmentfault.com/a/1190000007240744 https://baike.baidu.com/item/Glibc http://man7.org/linux ...
 - SSA与ASS字幕
			
SSA字幕与ASS字幕 SSA全称SubStationAlpha,是由CSLow(又称Kotus)创建的一种字幕格式,用以实现比传统字幕诸如srt等格式更为复杂的功能.SSA目前的版本为v4.00.S ...
 - Nginx 配置操作注意事项
			
Nginx reload 会中断现有连接吗? - 知乎https://www.zhihu.com/question/57096250 在NGINX上配置HTTPS---血的教训--要重启NGINX - ...
 - MFC加载大型osg模型
			
MFC加载模型,发现打开 Navid 缓冲等选项后,加载大型模型的速度就快了很多. #include "stdafx.h" #include "OSGObject.h&q ...
 - 中标麒麟QT5编译出现:cannot find -lGL 和 collect2:error:ld returned 1 exit status 错误
			
sudo yum install mesa-libGL-devel mesa-libGLU-devel