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元素来实现分页的功能,后来又用过网上有人写的一个上拉加载更多的插件,那个插件是页面将要滚动到底部时就自动请求数据并插入到页 ...
随机推荐
- java 乱码问题集
场景1:刚复制来的java类乱码,反复修改无果 解:将java类用NotePat++打开,可正常显示,复制过来即可.
- 51nod1220 约数之和
http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1220 $G(n)=\sum\limits_{i=1}^n\sum\lim ...
- crf++实现中文分词简单例子 (Windows crf++0.58 python3)
学习自然语言处理的同学都知道,条件随机场(crf)是个好东西.虽然它的原理确实理解起来有点困难,但是对于我们今天用到的这个crf工具crf++,用起来却是挺简单方便的. 今天只是简单试个水,参考别人的 ...
- 关于如何在电脑上安装adb来操作手机(Android)的方法及步骤
1.需要真实的安卓手机: 2.安卓手机需要开启USB调试模式,允许电脑进行调试(各个手机的开启方式可能不同,不知道的自行百度): 3.电脑需要安装ADB驱动,这里提供一个下载地址:https://ad ...
- RAMDISK 内存盘工具推荐
好了直接推荐, 1.魔方内存盘 使用方便 ,但是关机后消失.绿色 2.Primo Ramdisk Ultimate Edition5.5 3.GiliSoft RAMDisk 4.QSoft RAM ...
- expected_conditions模块提供了判断页面元素的16种方法
1.title_is: 判断当前页面的title是否完全等于(==)预期字符串,返回布尔值2.title_contains : 判断当前页面的title是否包含预期字符串,返回布尔值3.presenc ...
- 常见cmd命令,开发人员必备
运行程序 notepad--------打开记事本 calc-----------启动计算器 regedit.exe-------注册表 write----------写字板 mmc--------- ...
- MongoDB(1)--MongoDB安装及简介
一.MongoDB的应用场景及实现原理二.MongoDB的常用命令及配置三.手写基于MongoDB的ORM框架四.基于MongoDB实现网络云盘实战五.MongoDB 4.0新特性 一.MongoDB ...
- ubuntu安装后环境配置
首先实现能够连接外网,宿主机和虚拟机能ping通 进行smb的配置,能实现pytty的远程连接. 首先apt-get update 安装ssh apt-get install ssh 打开ssh服务 ...
- Android APK反编译(二)
参考:APK反编译 工具介绍 apktool 作用:资源文件获取,可以提取出图片文件和布局文件进行使用查看 dex2jar 作用:将apk反编译成java源码(classes.dex转化成jar文件) ...