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 ...
随机推荐
- hibernate如何配置自动生成表
hibernate自动生成表有两种方法: 1.直接写代码,通过方法来创建数据库表. 2.通过 hibernate.cfg.xml配置标签来创建数据表. 下面依次实现: 1.直接写代码,通过方法来创建数 ...
- cache-control: max-age=1,s-maxage=1
cache-control: max-age=1,s-maxage=1
- 手动安装sublimeText3插件
就在今天下午,我花了一个小时的时间安装sublime3插件stylus,就是为了让stylus文件能够高亮显示.网上找了很多方法,可以通过package control安装,然而,我的sublime ...
- nginx retryfiles
# Load configuration files for the default server block. include /etc/nginx/default.d/*.conf; #根据路由设 ...
- 小D课堂 - 零基础入门SpringBoot2.X到实战_第9节 SpringBoot2.x整合Redis实战_39、SpringBoot2.x整合redis实战讲解
笔记 3.SpringBoot2.x整合redis实战讲解 简介:使用springboot-starter整合reids实战 1.官网:https://docs.spring.io/spring-bo ...
- mvn创建flink项目
使用如下项目骨架创建flink项目,结果被官方的下面这个创建方式坑了.. mvn archetype:generate \ -DarchetypeGroupId=org.apache.flink \ ...
- 【转载】 Tensorflow中padding的两种类型SAME和VALID
原文地址: https://blog.csdn.net/jasonzzj/article/details/53930074 -------------------------------------- ...
- org.openqa.selenium.WebDriverException: unknown error: call function result missing 'value'
原因:浏览器和驱动版本不匹配 https://npm.taobao.org/mirrors/chromedriver
- nginx奔溃自动重启Shell脚本
# vi /usr/local/nginx/sbin/nginx_restart.sh 贴入一下代码: #!/bin/bash #www.xmsolink.com #Monitor nginx ser ...
- 003-guava 集合-不可变集合
一.概述 二.使用 2.1.不可变集合 1.为什么使用不可变集合 不可变对象有很多优点,包括: 当对象被不可信的库调用时,不可变形式是安全的:不可变对象被多个线程调用时,不存在竞态条件问题不可变集合不 ...