没用ui框架写简单的实现了下功能
思路:上拉加载肯定要滚动到底部,所以就先监听滚动条滚动到底部 然后执行分页+1请求数据push到渲染列表中即可;
同时判断最后一页时不请求,展示无数据状态
主要代码:
1:监听滚动底部
<script>
export default {
name: "index_SearchPage",
data() {
return {
};
},
components: {
headAssembly
},
created() {
var that=this
window.onscroll = function() {
//变量scrollTop是滚动条滚动时,距离顶部的距离
var scrollTop =
document.documentElement.scrollTop || document.body.scrollTop; //变量windowHeight是可视区的高度
var windowHeight =
document.documentElement.clientHeight || document.body.clientHeight; //变量scrollHeight是滚动条的总高度
var scrollHeight =
document.documentElement.scrollHeight || document.body.scrollHeight; //滚动条到底部的条件
if (scrollTop + windowHeight == scrollHeight) {
//已滚动底部
that.information_Load();
}
};
},
mounted() {
this.inputTyping();
},
2.滚动底部后页面+1 请求数据 push到渲染列表 page为最大值时 展示无数据状态
inputTyping() {
this.information_page=1
var that = this;
var baseUrl = process.env.API_ROOT;
//信息广场
var formData0 = new FormData();
formData0.append("page", 1);
formData0.append("q", that.inputVal);
formData0.append("source", 3);
axios
.post(
baseUrl + "/apiyd/Information/",
formData0
) // 问号后面是要传送的参数
.then(res => {
// 请求成功后的函数
if (res.data.code == 1000) {
that.information_list = res.data.data.data;//渲染列表数据
that.information_last_page = res.data.data.last_page;//获得总页数
} else {
$.alert(res.data.message);
}
});
}
information_Load() {
//信息上拉加载
let pageNum = this.information_page + 1;//页面+1
let last_page = this.information_last_page;//总页数
if (pageNum < last_page + 1) {
this.information_page = pageNum;
this.information_list_NoData = false;
$.showLoading("数据加载中");
var that = this;
var baseUrl = process.env.API_ROOT;
//信息广场
var formData0 = new FormData();
formData0.append("page", that.information_page);
formData0.append("q", that.inputVal);
formData0.append("source", 3);
axios
.post(
baseUrl + "/apiyd/Information/",
formData0
) // 问号后面是要传送的参数
.then(res => {
// 请求成功后的函数
if (res.data.code == 1000) {
$.hideLoading();
that.information_list.push(...res.data.data.data);
} else {
$.hideLoading();
$.alert(res.data.message);
}
});
} else {//当大于总页数展示无数据状态
this.information_list_NoData = true;
}
},
完整代码:
<template>
<div>
<div class="longinPage">
<headAssembly textTitle="搜索" ifReturn="1"/>
<div class="page__bd">
<div class="weui-search-bar" id="searchBar">
<form class="weui-search-bar__form">
<div class="weui-search-bar__box">
<i class="weui-icon-search"></i>
<input
@input="inputTyping"
type="search"
v-model="inputVal"
class="weui-search-bar__input"
id="searchInput"
placeholder="搜索"
required
>
<a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
</div>
<label class="weui-search-bar__label" id="searchText">
<i class="weui-icon-search"></i>
<span>搜索</span>
</label>
<