Requirements: Use the vant List component to implement paging loading of the page, and return the paging data backend
template template:
<van-list
v-if="!noData"
v-model:loading="loadingpage"
:finished="finishedpage"
finished-text="没有更多数据了"
@load="onLoad"
>
<div
class="recommendItem"
v-for="(item, index) in collectPositioninfoList"
:key="index"
@click="recommendItemClick(item.id)"
>
</div>
</van-list>js page writing method
// 定义接口参数
const current = ref(1)
const size = 10
const total = ref(0)
// 定义分页相关数据
const loadingpage = ref(false)
const finishedpage = ref(false)
// 控制占位图显示
const noData = ref(false)
// 定义接口数据数组
const collectPositioninfoList = ref([])
//封装接口请求数据方法
const getList = async (obj) => {
const {
data,
data: { records } //对数据 data 和列表数据 records 进行结构
} = await collectPositioninfoApi(obj) //调用后端接口
if (records.length == 0) {
// 判断获取数据条数若等于0
collectPositioninfoList.value = [] // 清空数组
finishedpage.value = true // 停止加载
noData.value = true // 展示占位图
} else {
noData.value = false //不展示占位图
}
// 若数据条数不等于0
total.value = data.total // 给数据总条数赋值
collectPositioninfoList.value.push(...records) // 将数据放入list中
loadingpage.value = false // 加载状态结束
// 如果list长度大于等于总数据条数,数据全部加载完成
if (collectPositioninfoList.value.length >= total.value) {
finishedpage.value = true // 结束加载状态
}
}
// onLoad 方法页面首次加载会执行一次，组件滚动到底部触发load事件并将loading 设置成 true
const onLoad = () => {
// 若加载条到了底部
let timer = setTimeout(() => {
// 定时器仅针对本地数据渲染动画效果,项目中axios请求不需要定时器
let obj = {
current: current.value,
size: size,
id: route.query.serial_no || '',
category: route.query.category || '', // 岗位类别
degree: contentEduItem.value || '', //学历
position: searchValueKeyword.value || '' //岗位名称(模糊查询)
}
getList(obj) // 调用上面方法,请求数据
current.value++ // 分页数加一
finishedpage.value && clearTimeout(timer) //清除计时器
}, 100)
}It should be noted that when using the tab bar to switch and load the paged data, in addition to clearing the array data for data reloading, the control for loading and finishing must also be recalculated.
Encountered a bug and recorded it. When the tab finishes switching data, slide down to load the data----it will cause the scroll bar to move to the top. Here, reassign loading.value = true before loading the data and it will be solved .
Requirements, realize anti-shake processing of search box input content (reduce the number of requests)
- When searching for an input, it is judged that the user is realized after the input is completed
即时的自动搜索 - and to prevent
过度自动搜索consumption of performance
Idea: use
watch+v-model
- v-model implements synchronous update of data input (think about data binding)
- watch monitors input changes, and uses the anti-shake function to implement subsequent operations
template template: search component
<van-search
clearable
v-model="searchValueKeyword"
placeholder="搜索岗位名称"
shape="round"
show-action
autocomplete="off"
>
<template #action>
<div @click="onZhiWeiBtn">职位</div>
</template>
</van-search>js anti-shake writing method: trigger multiple times within a certain period of time and only execute the last time
// 定义搜索框数据
const searchValueKeyword = ref('')
// 因为 防抖函数定义 返回的是一个回调函数, 我们可以用一个变量来接收
const searchInput = debounce(1000)
// 使用watch 监听 搜索框数据 变化
watch(searchValueKeyword, () => {
searchInput() //调用防抖的回调函数
})
// 防抖函数
function debounce(delay) {
let timer //声明一个存储定时器的变量
return function () {
if (timer) clearTimeout(timer) // 再次触发时之前的定时器没有结束就清空定时器
timer = setTimeout(() => {
// 暂时理解不了（this，arguments）指向改变的问题
// getList.call(this, arguments)
current.value = 1
collectPositioninfoList.value = []
let obj = {
current: 1,
size: size,
id: route.query.serial_no || '',
category: route.query.category || '', // 岗位类别
degree: contentEduItem.value, //学历
position: searchValueKeyword.value //岗位名称(模糊查询)
}
getList(obj) //每隔一秒发送一次请求
// 不输入延迟 则默认 1000 ms
}, delay || 1000)
}
}