vue 下拉刷新下拉加载组件(请求封装,搜索)
组件内容
<template>
<div class="list-module" ref="List">
<mt-loadmore :top-method="pullRefresh" :bottom-all-loaded="allLoaded" ref="loadmore">
<ul class="ulis" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading"
:infinite-scroll-distance="distance">
<li v-for="(item,index) in list" :key="index">
<slot :item="item" :index="index"></slot>
</li>
</ul>
<!-- <p v-show="!loading" class="loading-state">
<mt-spinner type="fading-circle" :size="30"></mt-spinner>
加载中...
</p>-->
<p class="txt-center no-data" v-show="noData">暂无数据!</p>
<div slot="top" class="loading-top-state">
<span v-show="refreshing" style="display: inline-block">
<mt-spinner type="snake" :size="30"></mt-spinner>
</span>
</div>
</mt-loadmore>
</div>
</template>
<script>
export default {
name: "newScroll",
props: {
interface: {
type: String,
default:''
},
size: {},
param: {},
distance: {
default: 10
},
hasChange: {
default: true
}
},
data() {
return {
allLoaded: false,
loading: false,
refreshing: false,
currentPage: -1,
list: [],
noData: false,
}
},
watch: {
interface() {
if (!this.hasChange) {
this.currentPage = 0;
this.list = [];
this.getList();
}
},
param: {
handler() {
if (this.hasChange) {
this.currentPage = 0;
this.list = [];
this.getList()
}
},
deep: true
}
},
updated() {
this.$emit('change')
},
mounted() {
this.$nextTick(() => {
// 保证包裹下拉列表的div的高度
this.h = document.documentElement.clientHeight - this.$refs.List.getBoundingClientRect().top
this.$refs.List.style.height = this.h + 'px';
})
},
methods: {
deleteIndex(index) {
this.list.splice(index, 1);
},
fresh() {
this.currentPage = 0;
this.list = [];
this.getList();
},
// 下拉刷新
pullRefresh() {
this.refreshing = true;
this.currentPage = 0;
this.list = [];
this.getList();
},
// 上拉加载
loadMore() {
this.currentPage++;
this.getList();
},
// 获取列表
getList() {
let self = this;
if(!self.interface){
return
}
let data = {
page: self.currentPage,
per_page: self.size
};
if (self.param) {
data = Object.assign(data, self.param)
}
self.$newAjax({
type: 'get',
url: self.interface,
data: data,
success(res) {
localStorage.setItem('_list_total', res.total);
if (res.err_code === '0') {
self.noData = res.total === '0';
self.list = self.list.concat(res.data);
self.$emit('changeList',self.list);
if (self.list.length === parseInt(res.total)) {
/*self.allLoaded = true;*/
self.loading = true;
} else {
self.loading = false;
}
setTimeout(() => {
if (self.refreshing) {
self.refreshing = false;
self.$refs.loadmore.onTopLoaded();
}
}, 1500)
}
},
dataError(res) {
self.loading = false;
console.log(res.err_msg);
}
})
}
}
}
</script>
<style scoped>
.mint-spinner {
display:inline-block;
vertical-align:middle;
}
.list-module {
overflow:scroll;
}
.no-more-data, .no-data {
line-height:75px;
font-size:32px;
}
.mint-loadmore {
min-height:100%;
}
</style>
调用页面
<div class="search-area">
<input class="txt-center" type="text" placeholder="搜索" v-model="newData.name">
<i class="iconfont icon-sousuo-"></i>
</div>
<new-scroll size=15 :interface="interFace" :param="newData" class="lists">
<template slot-scope="slotProps">
<ul class="list-content">
<li style="width: 25%;">{{(slotProps.index)+1}}</li>
<li style="width: 40%;">{{slotProps.item.created_at | cutBefore}}</li>
<li style="width: 35%;">{{slotProps.item.number}}</li>
</ul>
</template>
</new-scroll>
记住需要import
data() {
return {
newData:{
name:''
},
interFace:请求的接口
}
},
如果需要有底部固定的话可以再加一个钩子函数
两个定义分贝对应你自己设置的class
mounted() {
// 控制列表的高度(减去底部高度)
this.$nextTick(() => {
let list = document.querySelector('.list-module');
let bottom = document.querySelector('.toHome').clientHeight;
list.style.height = parseFloat(list.style.height) - bottom + 'px';
})
},