3-3 实现一个搜索列表组件
题目要求
查询触发条件
搜索框敲击回车
点击“Search”按钮
查询中,显示“Loading”
查询无结果时,显示“查无结果”
滚动列表时,支持懒加载
{{ item.title }}
{{ item.content }}
// 获取滚动条当前的位置
function getScrollTop() {
let scrollTop = 0
if (document.documentElement && document.documentElement.scrollTop) {
scrollTop = document.documentElement.scrollTop
} else if (document.body) {
scrollTop = document.body.scrollTop
}
return scrollTop
}
// 获取当前可视范围的高度
function getClientHeight() {
let clientHeight = 0
if (document.body.clientHeight && document.documentElement.clientHeight) {
clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight)
} else {
clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight)
}
return clientHeight
}
// 获取文档完整的高度
function getScrollHeight() {
return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight)
}
// 分割数组
function splitArray (list, size) {
let length = list.length;
if (length < 1 || size < 1) {
return [];
}
let index = 0;
let lindex = 0;
let result = new Array(Math.ceil(length / size));
while (index < length) {
result[lindex] = list.slice(index, (index += size));
lindex++;
}
return result;
};
// 节流
export {
getScrollTop,
getClientHeight,
getScrollHeight,
splitArray
}