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 ...
随机推荐
- 深度学习面试题17:VGGNet(1000类图像分类)
目录 VGGNet网络结构 论文中还讨论了其他结构 参考资料 2014年,牛津大学计算机视觉组(Visual Geometry Group)和Google DeepMind公司的研究员一起研发出了新的 ...
- Java web加密之将应用从http换成https的方法
转载:https://www.cnblogs.com/yangyang2018/p/8421453.html 感谢文章http://blog.csdn.net/zhangzuomian/article ...
- C++中操作符——学习笔记
1.箭头操作符 用于指针. 使用容器vector存指针,迭代器是指针需要 解引用后再解引用才是数据.图中漏掉了iter++ 记得要delete 2.算术运算符 %:获得余数. 优先级. 溢出: 除法的 ...
- Python写入csv文件示例
import csv header = ['City', 'AQI', 'PM2.5/1h', 'PM10/1h', 'CO/1h', 'NO2/1h', 'O3/1h', 'O3/8h', 'SO2 ...
- JS实现动态添加和删除div
实现方式一:只在最后一个数据中动态添加或者删除 | 背景需要做一个页面,页面可以输入参数,点击确认按钮可以发请求给某接口.但是接口的某个字段是数组类型,所以在页面上需要实现添加或者删除元素的功能. | ...
- 泡泡一分钟:Visual Odometry Using a Homography Formulation with Decoupled Rotation and Translation Estimation Using Minimal Solutions
张宁 Visual Odometry Using a Homography Formulation with Decoupled Rotation and Translation Estimation ...
- 线程或进程绑定到特定的cpu
常用的宏定义有: 1) 对cpu集进行初始化, 将其设置为空集 void CPU_ZERO(cpu_set_t *set); 2) 将指定的cpu加入到cpu集中 void CPU_SET(int c ...
- Spring cloud微服务安全实战-3-8API安全机制之Https
Https访问 1.验证双方的身份. 2.一旦建立连接,对数据进行封装加密 这里先生成一个自己自签的证书,不是第三方颁发的,第三方颁发的要花钱. 第二是做一些配置,让程序支持https 安装了java ...
- k8s记录-kubeadm安装(一)(转载)
配置 kubeadm 概述 安装 kubernetes 主要是安装它的各个镜像,而 kubeadm 已经为我们集成好了运行 kubernetes 所需的基本镜像.但由于国内的网络原因,在搭建环境时,无 ...
- BDE配置中的一个参数:SHAREDMEMLOCATION
用Delphi编写数据库程序经常会用到BDE [@more@] 但是前一段发现一个问题,根据程序需要修改了BDE的设置,结果发现只能运行一个实例,再打开这个程序或其他用到BDE的程序系统就会报错: E ...