VueScroller 使用
2024-08-29 09:36:27
下载插件 npm install vue-scroller -D
引入插件:
import Vue from 'vue'
import VueScroller from 'vue-scroller'
Vue.use(VueScroller)
demo
<template>
<div>
<scroller :on-refresh="refresh" :on-infinite="infinite" no-data-text="加载完成" refresh-text="下拉刷新" ref="my_scroller">
<div v-for="(item, index) in items" @click="onItemClick(index, item)" class="row" :class="{'grey-bg': index % 2 == 0}">
<p>序号:{{index+1}}</p>
<p>昵称:{{ item.nikename }}</p>
<p> 时间:{{ item.createTime }}</p>
</div>
</scroller>
</div>
</template>
<script>
import { getaa } from '@/api/api';
export default {
data() {
return {
items: [],
pageSize: 10,
pageNo: 1,
maxpage: 1,
counts: 0
}
},
mounted() { },
methods: {
getDate(offset, fn) {
var _this = this;
var params = {
page: this.pageNo,
limit: this.pageSize,
sidx: "",
order: ""
};
getaa(params).then(res => {
var data = res.data.page.list;
_this.counts = res.data.page.totalCount;
var n = res.data.page.totalCount;
var m = _this.pageSize;
if(n % m > 0) {
_this.maxpage = parseInt(n / m) + 1;
} else {
_this.maxpage = parseInt(n / m);
}
if(_this.pageNo > _this.maxpage) {
fn(true);
return;
} else {
if(fn) fn();
this.items = this.items.concat(data);
}
})
},
infinite(done) {
this.pageNo++; //每当向上滑动的时候就让页数加1
setTimeout(() => {
this.getDate(this.pageNo, done);
}, 1500)
},
refresh(done) {
//这是向下滑动的时候请求最新的数据
this.pageNo = 1;
setTimeout(() => {
this.items = [];
this.getDate(this.pageNo, done);
}, 1500)
},
onItemClick(index, item) {
console.log(index)
}
}
}
</script>
<style>
@import url("../../assets/css/style.css");
.row {
padding: 20px;
border-bottom: 1px solid red;
}
</style>
最新文章
- 两个已排序数组进行合并后的第K大的值--进军硅谷
- 转载:[AngularJS系列] 那伤不起的provider们啊~ (Provider, Value, Constant, Service, Factory, Decorator)
- BZOJ3631[JLOI2014]松鼠的新家 题解
- Codeforces 367
- jpa仓库接口
- 经历:Java中字符串中按照多个字符拆分或替换:split()和replaceAll()
- swiper去除滑动设置
- libvirt python binding 变成了一个新项目了。
- WEB典型应用
- 从源码分析java.lang.String.isEmpty()
- [Hdu1342] Lotto
- [Luogu3455][POI2007]ZAP-Queries
- [论文阅读] ImageNet Classification with Deep Convolutional Neural Networks(传说中的AlexNet)
- Dubbo中集群Cluster,负载均衡,容错,路由解析
- vue 脚手架关于路由的一点理解
- len()方法
- 一、在windows环境下修改pip镜像源的方法(以python3为例)
- dos命令:文件操作
- Java 代码块:静态代码块、构造代码块、构造函数块
- 『PyTorch』第五弹_深入理解Tensor对象_上:初始化以及尺寸调整