vue3实现h5触底翻页加载_auto complete标签触底翻页vue3

在滚动元素上添加滚动事件

<div class="card-list" @scroll="pageScroll">
  <!-- 滚动内容 -->
  <div class="card" v-for="item in dataList">
    <!-- 内容 -->
  </div>
</div>

滚动方法

const dataList = ref([]);
let page = 1; // 分页页数
let	limit = 10; // 分页条数
let	total = 0; // 总数
let	isLoading = false; //是否加载中
 
// 滚动方法
const pageScroll = (e) => {
	// 滚动条滚动时，距离顶部的距离
  const scrollTop = e.target.scrollTop;
  // 可视区的高度
  const windowHeight = e.target.clientHeight;
  // 滚动条的总高度
  const scrollHeight = e.target.scrollHeight;
  // 当滚动条滚动到底部 并且 当前数据小于总数时进行翻页
  if (scrollTop + windowHeight == scrollHeight && dataList.value.length < total) {
  	page++;
    // 获取下一页的数据
    getDataList();
  }
}
 
// 获取数据
const getDataList = async () => {
	try {
    // 加载中...
		isLoading = true; 
		const {data, paging} = await getRecordDateList(limit, (page - 1) * limit);
		dataList.value = dataList.value.concat(data);
		total = paging.total;
    // 取消加载中
		isLoading = false; 
	} catch (error) {
		console.log(error);
		isLoading = false;
	}
};