跨境派

跨境派

跨境派,专注跨境行业新闻资讯、跨境电商知识分享!

当前位置:首页 > 综合服务 > 电商平台 > vue3+element-plus 通过v-infinite实现下拉滚动无限加载

vue3+element-plus 通过v-infinite实现下拉滚动无限加载

时间:2024-03-31 11:15:35 来源:网络cs 作者:焦糖 栏目:电商平台 阅读:

标签: 滚动  无限  通过  实现 

v-infinite官网

v-infinite-scroll无限滚动组件使用详解

 1、v-infinite-scroll="load" //load无限滚动加载的方法 2、infinite-scroll-disabled //是否禁用无限滚动加载 3、infinite-scroll-delay //节流时延,单位为ms 4、infinite-scroll-distance //触发加载的距离阈值,单位为px 5、infinite-scroll-immediate //是否立即执行加载方法,以防初始状态下内容无法撑满容器。 //默认情况下,infinite-scroll-disabled是false,因此如果组件使用无限滚动加载组件,即使在vue不进行加载方法的调用,组件也会调用该方法,因此如果需要控制的话,尽量是使用infinite-scroll-disabled属性来进行加载方法是否调用的控制。

 官网给到的基础案例:

<template>  <ul v-infinite-scroll="load" class="infinite-list" style="overflow: auto">    <li v-for="i in count" :key="i" class="infinite-list-item">{{ i }}</li>  </ul></template><script lang="ts" setup>import { ref } from 'vue'const count = ref(0)const load = () => {  count.value += 2}</script><style>.infinite-list {  height: 300px;  padding: 0;  margin: 0;  list-style: none;}.infinite-list .infinite-list-item {  display: flex;  align-items: center;  justify-content: center;  height: 50px;  background: var(--el-color-primary-light-9);  margin: 10px;  color: var(--el-color-primary);}.infinite-list .infinite-list-item + .list-item {  margin-top: 10px;}</style>

自己写了一个简单的demo:

<div>     <el-select v-model="value" style="margin-right: 20px" v-if="isMounted">        <div v-infinite-scroll="load" infinite-scroll-immediate="false" style="overflow: hidden"></div>         <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />     </el-select></div><script setup>const value = ref('')let options = reactive([{  value: "aaa",  label: "atext"},{  value: "bbb",  label: "atext"}, {  value: "cccc",  label: "atext"}, {  value: "cccc",  label: "atext"}, {  value: "cccc",  label: "atext"}, {  value: "cccc",  label: "atext"}, {  value: "cccc",  label: "atext"}, {  value: "cccc",  label: "atext"}, {  value: "cccc",  label: "atext"}, {  value: "cccc",  label: "atext"}, {  value: "ddd",  label: "dtext"}, {  value: "yyyy",  label: "dtext"}])const load = () => {  options.push({    value: "xxxx",    label: "xtext"  })}const isMounted = ref(false);onMounted(() => {  isMounted.value = true;});</script>

当使用v-infinite时,控制台会报错:

 原因:

官方上的Issues解释是需要nextTick()之后再去显示
解决方法是组件挂载完成再去显示el-select组件

所以在上面demo中select组件加了v-if,并且在onMounted中将其再显示出来。

报错解决问题是掘金上的一位大哥的方法,原文地https://juejin.cn/post/7095925947412512804

 

 上面el-select组件的下拉加载,看完可能会有两个疑问,一个是为什么el-option不写在v-infinite-scroll标签内部,二是为什么v-infinite-scroll 所在的标签的overflow属性不是和官网一样的atuo,二是hidden,因为在此案例中放到内部或不放在内部效果一样的,最核心的是如果此案例中,并没有给v-infinite-scroll所在的标签设置高度,理应是下拉加载会失效,但是如果是hidden的话,并且此时高度为0,那么只要鼠标滚轮滑动,那么就会触发下拉加载,

总结下拉就是,此案例效果是打开下拉框,只要滑动滚轮就触发下拉加载,二官网那种标准案例,是滚轮滑动到底部才会触发下拉加载。

如果是官网那种标准做法需要注意:使用v-infinite-scroll的元素设置overflow: hidden以及固定高度

本文链接:https://www.kjpai.cn/news/2024-03-31/151425.html,文章来源:网络cs,作者:焦糖,版权归作者所有,如需转载请注明来源和作者,否则将追究法律责任!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。

上一篇:【C语言】strlen()函数

下一篇:返回列表

文章评论