IntersectionObserver 实现无限滚动
实现 滚动 无限
2023-09-11 14:15:29 时间
observerInfiniteScroll.vue
<template> <div> <ul> <li class="list-item" v-for="item in items" :key="item.id">{{item.title}}</li> </ul> <Observer @intersect="intersected" /> </div> </template> <script> import Observer from 'src/components/observer/observer'; import axios from 'axios'; export default { data: () => ({ page: 1, items: [] }), components: { Observer, }, methods: { async intersected() { await axios .get('https://cnodejs.org/api/v1/topics', { params: { page: this.page, limit: 20, }, }) .then(res => { this.page++; this.items = [...this.items, ...res.data.data]; }); }, }, }; </script> <style lang="scss"> .list-item { padding: 0.3rem; } </style>
observer.vue
<template> <div class="observer" /> </template> <script> export default { props: ['options'], data: () => ({ observer: null }), mounted() { const options = this.options || {}; this.observer = new IntersectionObserver(([entry]) => { if (entry && entry.isIntersecting) { this.$emit('intersect'); } }, options); this.observer.observe(this.$el); }, destroyed() { this.observer.disconnect(); }, }; </script>
.
相关文章
- 自己定义View实现水平滚动控件
- abp(net core)+easyui+efcore实现仓储管理系统——ABP WebAPI与EasyUI结合增删改查之六(三十二)
- 使用纯 CSS 实现滚动阴影效果
- vue实现文字上下滚动效果
- Android使用NumberPicker实现年月滚动选择器
- Cocos2d-JS 实现将TiledMap中的每个 tile 变成物理精灵的方法
- JavaScript - Vue / React 实现网页标题文字滚动效果,在浏览器标题栏页签选项卡上进行滚动的特效(详细示例源代码)前端所有技术栈通用,适用于任何前端项目!
- Java实现断点续传。
- java实现多层级目录树详解
- java实现QQ、微信等第三方账号登陆
- C#-利用Marshal类实现序列化
- 《HTML5 开发实例大全》——1.13 使用< progress >标记元素实现进度条效果
- Android中如何实现多行、水平滚动的分页的Gridview?
- Android实现 ScrollView + ListView无滚动条滚动
- JAVA微信扫码支付模式二功能实现完整例子
- (数据科学学习手札136)Python中基于joblib实现极简并行计算加速
- SwiftUI 文本组件之滚动动画数字组件 实现充满情感的微交互
- JS手写实现发布订阅设计模式
- Flutter Text 实现下划线、波浪线、删除线、背景色、渐变文字、阴影、描边、空心字
- Jquery+css实现图片无缝滚动轮播
- 【Java基础教程】用Java实现猜数字小游戏
- fullPage 实现全屏滚动
- JS魔法堂:通过marquee标签实现信息滚动效果
- [elk]elasticsearch实现冷热数据分离
- 借助CSS Shapes实现元素滚动自动环绕iPhone X的刘海
- Android简单调用相机Camera功能,实现打开照相功能
- ECharts 实现地图散点图上(转载)
- Java小白入门200例82之Java实现多继承
- JavaScript之JS实现动画效果
- python 第三方包openpyxl 实现Excel读写操作
- vue 实现表格循环滚动 vue-seamless-scroll插件的安装与使用