<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)的更多相关文章

  1. Android 下拉刷新上啦加载SmartRefreshLayout + RecyclerView

    在弄android刷新的时候,可算是耗费了一番功夫,最后发觉有现成的控件,并且非常好用,这里记录一下. 原文是 https://blog.csdn.net/huangxin112/article/de ...

  2. SwipeRefreshLayout实现下拉刷新上滑加载

    1. 效果图 2.RefreshLayout.java package myapplication.com.myapplication; import android.content.Context; ...

  3. 移动端下拉刷新上拉加载-mescroll.js插件

    最近无意间看到有这么一个上拉刷新下拉加载的插件 -- mescroll.js,个人感觉挺好用的,官网地址是:http://www.mescroll.com 然后我就看了一下文档,简单的写了一个小dem ...

  4. vue mint-ui 框架下拉刷新上拉加载组件的使用

    安装 npm i mint-ui -S 然后在main.js中引入 import MintUI from 'mint-ui' import 'mint-ui/lib/style.css' Vue.us ...

  5. mui下拉刷新上拉加载

    新外卖商家端主页订单大厅页面 使用mui双webview,实现下拉刷新上拉加载 主页面: order_index.html <!doctype html> <html> < ...

  6. 带你实现开发者头条APP(五)--RecyclerView下拉刷新上拉加载

    title: 带你实现开发者头条APP(五)--RecyclerView下拉刷新上拉加载 tags: -RecyclerView,下拉刷新,上拉加载更多 grammar_cjkRuby: true - ...

  7. ListView实现Item上下拖动交换位置 并且实现下拉刷新 上拉加载更多

    ListView实现Item上下拖动交换位置  并且实现下拉刷新  上拉加载更多 package com.example.ListViewDragItem; import android.app.Ac ...

  8. [ionic开源项目教程] - 第7讲 实现下拉刷新上拉加载ion-refresher和ion-infinite-scroll

    第7讲 实现下拉刷新上拉加载ion-refresher和ion-infinite-scroll 1.将tab1.html的代码改为如下: <ion-content> <ion-ref ...

  9. JS+CSS实现的下拉刷新/上拉加载插件

    闲来无事,写了一个当下比较常见的下拉刷新/上拉加载的jquery插件,代码记录在这里,有兴趣将代码写成插件与npm包可以留言. 体验地址:http://owenliang.github.io/pull ...

  10. 基于SwiperJs的H5/移动端下拉刷新上拉加载更多的效果

    最早时,公司的H5项目中曾用过点击一个"加载更多"的DOM元素来实现分页的功能,后来又用过网上有人写的一个上拉加载更多的插件,那个插件是页面将要滚动到底部时就自动请求数据并插入到页 ...

随机推荐

  1. 基于springboot+bootstrap+mysql+redis搭建一套完整的权限架构【六】【引入bootstrap前端框架】

    https://blog.csdn.net/linzhefeng89/article/details/78752658 基于springboot+bootstrap+mysql+redis搭建一套完整 ...

  2. .Net Core跨平台应用研究-HelloArm(串口篇)

    引言 为了验证采用dotnet core技术开发的物联网设备数据采集接入服务应用是否能在高性价比的linux嵌入式平台运行,针对dotnet core应用程序进行嵌入式linux环境的发布部署运行验证 ...

  3. 2016310Exp4 恶意代码及分析

    网络对抗 Exp4 恶意代码分析 实验内容 系统运行监控 恶意软件分析 报告评分 基础问题回答 实践目标 实验内容 1. 系统运行监控——计划任务 2. 系统运行监控——利用Sysmon 3.1恶意软 ...

  4. axublogcms1.1.0 Getshell

    axublogcms1.1.0 Getshell 代码执行漏洞 现在最新版是1.1.0   今天重新审计了下 axublogcms1.0.6 ,发现一处计较鸡肋的漏洞,因为并不是只有1.0.6版本存在 ...

  5. 使用svn创建分支!

    1 在主分支上 右键svn---选中 branch/Tag选项 2,填写新分支目录之后 点击 ok键 3,在新创建的分支目录 右键 --> Chenckout下  就可以把代码拉下来了 4.更新 ...

  6. Validation.Add();Excel

    Irange = (Microsoft.Office.Interop.Excel.Range)worksheet.get_Range("I1", "I1").g ...

  7. Point : GPU编程的艺术!一切的历史!

    Point: 渲染渲染,神奇的渲染!! ———————————————— 只要你走的足够远,你肯定能到达某个地方. 1"GPU编程" History ————————— //由于笔 ...

  8. java类的生命周期

    https://www.cnblogs.com/aspirant/p/7200523.html 验证的内容:文件格式,字节码,符号引用,元数据 准备:给静态变量分配内存设置初始值(0) 初始化才是真正 ...

  9. 【转载】Google 程序员消灭 Bug 的 5 大法宝!

    遇到问题怎么办?还能怎么办,解决呗.那到底怎么解决呢?你是有什么惯用的逻辑模式.解决策略,还是全靠直觉手感? 本文中,一位 Google 程序员将“现场”演示其解决编程问题的始末,看看有套路的问题解决 ...

  10. Eclipse配置“运行时依赖路径”

    Python项目 本地有项目A,项目B,项目A,依赖项目B,在eclipse中,将项目B的路径添加到项目A的PYTHONPATH中. Java项目Build path(略)