vue 下拉刷新 上拉加载(vue-scroller)
<template>
<div class="wdRecordCon">
<x-header :left-options="{backText:''}" class="indexHeader">标题啊
</x-header>
<div class="wdRecordMain">
<scroller :on-refresh="onRefresh" :on-infinite="onInfiniteLoad" ref="myScroller">
<div slot="refresh-spinner" class="scrollerSolt">
<img src="../../static/images/dropLoading.gif" alt="">
</div>
<div class="recordMain" v-for="(item,index) in listData" :key="item.order_id"> </div>
</scroller>
</div>
</div>
</template> <script>
import {
XHeader
} from "qsvux";
export default {
name: 'WithDrawalRecord',
components: {
XHeader
},
data() {
return {
listData: [],
pageSize: 1,
top: 0,
noData: false //无更多数据
}
},
watch: {},
methods: {
// 全部订单下拉刷新
onRefresh(done) {
this.getData(done, true);
},
// 全部订单上拉加载
onInfiniteLoad(done) {
if (!this.noData)
this.getData(done);
else done(true);
},
getData(done, reset = false) {
return new Promise((resolve, reject) => {
//如果是下拉刷新页数置为1;上拉加载可用
if (reset)
this.pageSize = 1, this.noData = false;
this.ajax.get("******?p="+this.pageSize, {}, data => {
if (reset)
this.listData = data.data.datas;
else
this.listData = this.listData.concat(data.data.datas);
//页数递加
this.pageSize++;
this.$nextTick(() => {
if (data.data.datas.length == 0) {
this.noData = true;
done(true);
} else done(false);
resolve(data.data.datas.length);
});
}, data => {
resolve(0);
});
})
},
getScroller() {
this.top = this.$refs.myScroller.getPosition().top;
},
gotoScroller() {
setTimeout(() => {
this.$refs.myScroller.scrollTo(0, this.top, true)
})
}
},
computed: {},
created() {},
mounted() {}
}
</script> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss"> </style>
vue 下拉刷新 上拉加载(vue-scroller)的更多相关文章
- Android 下拉刷新上啦加载SmartRefreshLayout + RecyclerView
在弄android刷新的时候,可算是耗费了一番功夫,最后发觉有现成的控件,并且非常好用,这里记录一下. 原文是 https://blog.csdn.net/huangxin112/article/de ...
- SwipeRefreshLayout实现下拉刷新上滑加载
1. 效果图 2.RefreshLayout.java package myapplication.com.myapplication; import android.content.Context; ...
- 移动端下拉刷新上拉加载-mescroll.js插件
最近无意间看到有这么一个上拉刷新下拉加载的插件 -- mescroll.js,个人感觉挺好用的,官网地址是:http://www.mescroll.com 然后我就看了一下文档,简单的写了一个小dem ...
- vue mint-ui 框架下拉刷新上拉加载组件的使用
安装 npm i mint-ui -S 然后在main.js中引入 import MintUI from 'mint-ui' import 'mint-ui/lib/style.css' Vue.us ...
- mui下拉刷新上拉加载
新外卖商家端主页订单大厅页面 使用mui双webview,实现下拉刷新上拉加载 主页面: order_index.html <!doctype html> <html> < ...
- 带你实现开发者头条APP(五)--RecyclerView下拉刷新上拉加载
title: 带你实现开发者头条APP(五)--RecyclerView下拉刷新上拉加载 tags: -RecyclerView,下拉刷新,上拉加载更多 grammar_cjkRuby: true - ...
- ListView实现Item上下拖动交换位置 并且实现下拉刷新 上拉加载更多
ListView实现Item上下拖动交换位置 并且实现下拉刷新 上拉加载更多 package com.example.ListViewDragItem; import android.app.Ac ...
- [ionic开源项目教程] - 第7讲 实现下拉刷新上拉加载ion-refresher和ion-infinite-scroll
第7讲 实现下拉刷新上拉加载ion-refresher和ion-infinite-scroll 1.将tab1.html的代码改为如下: <ion-content> <ion-ref ...
- JS+CSS实现的下拉刷新/上拉加载插件
闲来无事,写了一个当下比较常见的下拉刷新/上拉加载的jquery插件,代码记录在这里,有兴趣将代码写成插件与npm包可以留言. 体验地址:http://owenliang.github.io/pull ...
- 基于SwiperJs的H5/移动端下拉刷新上拉加载更多的效果
最早时,公司的H5项目中曾用过点击一个"加载更多"的DOM元素来实现分页的功能,后来又用过网上有人写的一个上拉加载更多的插件,那个插件是页面将要滚动到底部时就自动请求数据并插入到页 ...
随机推荐
- 基于springboot+bootstrap+mysql+redis搭建一套完整的权限架构【六】【引入bootstrap前端框架】
https://blog.csdn.net/linzhefeng89/article/details/78752658 基于springboot+bootstrap+mysql+redis搭建一套完整 ...
- .Net Core跨平台应用研究-HelloArm(串口篇)
引言 为了验证采用dotnet core技术开发的物联网设备数据采集接入服务应用是否能在高性价比的linux嵌入式平台运行,针对dotnet core应用程序进行嵌入式linux环境的发布部署运行验证 ...
- 2016310Exp4 恶意代码及分析
网络对抗 Exp4 恶意代码分析 实验内容 系统运行监控 恶意软件分析 报告评分 基础问题回答 实践目标 实验内容 1. 系统运行监控——计划任务 2. 系统运行监控——利用Sysmon 3.1恶意软 ...
- axublogcms1.1.0 Getshell
axublogcms1.1.0 Getshell 代码执行漏洞 现在最新版是1.1.0 今天重新审计了下 axublogcms1.0.6 ,发现一处计较鸡肋的漏洞,因为并不是只有1.0.6版本存在 ...
- 使用svn创建分支!
1 在主分支上 右键svn---选中 branch/Tag选项 2,填写新分支目录之后 点击 ok键 3,在新创建的分支目录 右键 --> Chenckout下 就可以把代码拉下来了 4.更新 ...
- Validation.Add();Excel
Irange = (Microsoft.Office.Interop.Excel.Range)worksheet.get_Range("I1", "I1").g ...
- Point : GPU编程的艺术!一切的历史!
Point: 渲染渲染,神奇的渲染!! ———————————————— 只要你走的足够远,你肯定能到达某个地方. 1"GPU编程" History ————————— //由于笔 ...
- java类的生命周期
https://www.cnblogs.com/aspirant/p/7200523.html 验证的内容:文件格式,字节码,符号引用,元数据 准备:给静态变量分配内存设置初始值(0) 初始化才是真正 ...
- 【转载】Google 程序员消灭 Bug 的 5 大法宝!
遇到问题怎么办?还能怎么办,解决呗.那到底怎么解决呢?你是有什么惯用的逻辑模式.解决策略,还是全靠直觉手感? 本文中,一位 Google 程序员将“现场”演示其解决编程问题的始末,看看有套路的问题解决 ...
- Eclipse配置“运行时依赖路径”
Python项目 本地有项目A,项目B,项目A,依赖项目B,在eclipse中,将项目B的路径添加到项目A的PYTHONPATH中. Java项目Build path(略)