vue3.0 实现列表无线滚动Infinite Scroll——

一、无限滚动组件指令详情

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

二、注意点
**1.在使用的时候要给外部大盒子加个overflow: auto;**不然会疯狂报错

2.在指令使用的div一定要限定高度（height：xxx; overflow-y:auto）handleInfiniteScroll加载方法将在拉取底部时才会被执行。

三、代码demo演示

<template><div class="fire_warning_root"><div class="fire_warn_title"><p>预警类型</p><p>上报来源</p><p>日期</p><p>地名</p><p>坐标</p><p>状态</p></div><div class="infinite-list-wrapper" style="overflow: auto"><ulv-infinite-scroll="handleInfiniteScroll"class="list":infinite-scroll-disabled="disabled"><liv-for="item in count":key="item.id"class="list-item"@click="handleFirePoint3D(item)":style="{background: activeItem.id === item.id ? '#fef0f0' : '',color: activeItem.id === item.id ? '#f56c6c' : '',}"><p>{{item.fireAlarmType == 1? "巡护事件": item.fireAlarmType == 2? "群众上报": item.fireAlarmType == 3? "云台预警": "卫星预警"}}</p><p>{{ item.reportingSource }}</p><p>{{ item.reportDate }}</p><p>{{ item.address }}</p><p>{{ item.longitude }}&nbsp;{{ item.latitude }}</p><p>{{item.state == 0 ? "待处理 " : item.state == 1 ? "已处理" : "其他"}}</p></li></ul><p v-if="loading">加载中...</p><p v-if="noMore">暂无</p></div></div>
</template>

<script setup name="FireWarning">
import { fireWarningHistorical } from "@/apis/map-fire-warning";import { computed, ref, reactive, onMounted, toRefs, watch } from "vue";// 状态管理依赖
import { useStore } from "vuex";const props = defineProps({activeChecked: {type: Number,},
});const { activeChecked } = toRefs(props);
const emit = defineEmits(["handleActiveInfo"]);const count = ref([]);
const loading = ref(false);
const noMore = computed(() => count.value.length >= 9999);
const disabled = computed(() => loading.value || noMore.value);const activeItem = ref({});
const state = reactive({size: 3,current: 1,
});
const handleInfiniteScroll= () => {loading.value = true;setTimeout(() => {state.current += 1;lookFireWarning();}, 2000);
};/**@description: 查看火情预警*@param: {}*@return:{}*/
const lookFireWarning = async () => {let para = {current: state.current,size: state.size,};const [err, data] = await fireWarningHistorical({type: activeChecked.value,...para,});loading.value = false;// 把每一次滚动加载请求的数据push的routeData数组let list = data.records;for (let i = 0; i < list.length; i++) {count.value.push(list[i]);}loading.value = false;
};const handleFirePoint3D = (item) => {activeItem.value = item;};onMounted(() => {lookFireWarning();
});
</script>

vue3.0 实现列表无线滚动Infinite Scroll———elementPlus相关推荐

Infinite Scroll - jQuery WP 无限滚动插件
无限滚动(Infinite Scroll)也称为自动分页.滚动分页和无限分页.常用在图片.文章或其它列表形式的网页中,用来在滚动网页的时候自动加载下一页的内容.Infinite Scroll 这款 ...
无限滚动插件Infinite Scroll
最近一个项目需要用到无限滚动,调查了很多最后用了Infinite Scroll这个插件. 优点 ①ajax的函数是内部已经封装好,所有不需要单独的调用. ②后台返回的形式既可以是静态html形式也可以 ...
Vue3.0基础教程：条件渲染：v-if v-else-if v-if；列表渲染：v-for
Vue3.0 学习笔记 4 条件渲染 v-if指令 v-if指令用于动态渲染一块内容,只有当该指令的表达式值为true时才渲染,也可配套使用v-else指令设置一个else-if块和else块 < ...
Vue3.0 + typescript 高仿网易云音乐 WebApp
Vue3.0 + typescript 高仿网易云音乐 WebApp 前言 Vue3.0 的正式发布,让我心动不已,于是尝试用 vue3 实现一个完整的项目,整个项目全部使用了 composition ...
【Vue学习笔记】尚硅谷Vue2.0+Vue3.0全套教程丨vue.js从入门到精通
尚硅谷Vue2.0+Vue3.0全套教程丨vue.js从入门到精通 1.Vue核心部分 1.1 Vue简介 1.1.1 Vue是什么? Vue是一套用于构建用户界面的渐进式JavaScript框架. ...
jquery插件（二）：Infinite Scroll–无限分页
一.前言现在有很多网站都有这样的交互 1.当你往下浏览页面时,页面会自动去异步加载数据. 无限分页效果 infinite scroll 效果图 –ifxoxo.com 2.在页面下方有一个" ...
CSS3实现列表无限滚动/轮播
使用CSS3实现列表的无限滚动/轮播效果预览思路将当前列表滚动至最后一项的末尾,然后瞬间切换回第一项问题点用什么方式实现无限轮播这个问题就是列表滚动到最后时底部会留白(有多余空间)如何处理 ...
尚硅谷Vue2.0+Vue3.0全套教程视频笔记 + 代码 [P001-050]
视频链接:尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通_哔哩哔哩_bilibili P1-50:当前页面. P51-100:尚硅谷Vue2.0+Vue3.0全套教程视频笔记 + ...
使用infinite-scroll实现Ghost博文列表的滚动加载
Ghost博客系统默认提供的博文列表为传统的翻页方式(通过点击上一页.下一页等按钮来切换),随着移动客户端的发展,瀑布流式的滚动加载方式得到广泛应用,有效地提高了用户浏览信息的流畅度.下面详述如何通过 ...

vue3.0 实现列表无线滚动Infinite Scroll———elementPlus

vue3.0 实现列表无线滚动Infinite Scroll———elementPlus相关推荐

最新文章

热门文章