vue2/3 - 实现容器内无限下拉滚动懒加载数据，vue下拉滚动无限加载数据功能，支持移动端手滑、pc电脑端滚动条和鼠标拖动，数据列表在一个div元素内进行滚动懒加载（详细示例代码，一键复制开箱即用

于 2024-04-30 12:01:41 发布
阅读量3.6k 收藏 4
点赞数 3
分类专栏： 前端组件与功能(开箱即用) 文章标签： vue2 vue3 nuxt.js 容器内局部拖动滚动条加载数据 列表无限下拉滚动加载数据 列表包裹在容器里进行懒加载 vue详细滑动滚动条数据加载
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50545213/article/details/138340816
版权

效果图

在vue2、vue3项目中，详细完成 “元素div容器内” 无限下拉滚动进行数据懒加载，在div容器里局部实现拖动滚动条进行数据加载，vue实现滑动滚动条来加载数据，支持手机端手指拖动加载和PC电脑端拖动滚动条或鼠标滚轮触底加载。

提供详细示例代码，新手小白直接复制改个样式就能用了。

在这里插入图片描述

示例源码

具体介绍及详细代码如下，

了解本专栏 订阅专栏 解锁全文
街尾杂货店&
关注
  • 3
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
Vue - PC 端列表下拉页面触底加载分页数据，监听浏览器屏幕触底事件，类似uni-app微信小程序的onReachBottom()页面触底生命周期函数（监听屏幕触底事件，实现懒加载效果）
王佳斌
08-18 1709
Vue.js Nuxt.js 无限下拉滚动列表，项目监听 PC 浏览器屏幕触底事件，类似uni-app微信小程序的onReachBottom()页面触底生命周期函数（监听屏幕触底事件，实现懒加载效果），vue无限滚动vue-infinite-scroll插件的配置及使用详解，下拉加载新的分页数据，vue-infinite-scroll 使用教程，vue.js页面触底触发分页加载，VUE.js中怎么监听屏幕触底事件，项目移动端H5类似uni-app微信小程序的onReachBottom()生命周期函数，移动端
Vue - 列表拖曳排序 / 鼠标拖动改变顺序排列高效简洁组件（支持PC端与移动端触屏拖动，也可在滚动条内排序自动滚动，流畅丝滑无 BUG）
王佳斌
09-03 4027
Vue - 高效简洁列表拖曳排序 / 鼠标拖动改变顺序排列组件支持PC端与移动端触屏拖动，也可在滚动条内排序自动滚动，流畅丝滑无 BUG列表拖曳排序插件vuedraggable拉动拽动拖动顺序改变排序js,vue.js,nuxt.js列表如何实现鼠标拖曳改变顺序排列支持滚动条内复杂数据对象带拖动效果动画排序完毕自动排列数组位置克隆Vue.Draggable 官方文档教程SortableJS与vuedraggable列表拖动排序Vue拖拽组件库vuedraggable的安装与使用用户用鼠标拖动排序功能源码最好
vue PC端浏览器滚动条滚动分页加载
swagLi的博客
02-28 835
一、需要用的外部文件统一存放在utils文件夹内 throttle.js 节流 // 节流 export const throttle = function (fn, delay) { let preTime = Date.now() return function () { const context = this const args = arguments const nowTime = Date.now() if (nowTime -
pc端-页面下拉加载更多
Uxiao7的博客
03-29 1261
<div onScroll={this.handleScroll}></div> // 触底-下拉加载更多 scrollMsg = throttle((event) => { const { handBookMenuListPages, getHandBookMenuList, ishandBookMenuListLoading } = this.props; const { scrollHeight, scrollTop, clientHeigh
Vue PC端项目 scroll 触底加载 分页 节流
Lililiming_的博客
02-21 1792
vue PC端项目，scroll 滚动分页触底加载 更多 节流
移动端访问Vue项目页面无数据，但是PC访问有数据
supremeJacob的博客
03-21 1520
结论： 手机浏览器不支持localStorage，改用sessionStorage 调试过程： 晚上正准备关电脑早点溜街时，测试那边提了一个移动端访问H5页面无数据展示的bug，那一刻有些头疼，但是马上进入了调试状态。 首先打开了Fiddler抓包工具，把抓到的url复制到PC浏览器进行访问，结果发现PC上访问这个页面是有数据的，那就有些蛋疼了呀，今晚就得要发新版本，没想到最后还出这个幺蛾子，突然之前成为了全村的希望，感觉有些受宠若惊。 冷静分析了下，与浏览器抓到的东西进行了比对，发现移动端是没有进行接
vue实现上下滑动翻页_vue 实现滚动到底部翻页效果(pc端)
weixin_39969340的博客
01-14 912
pc端vue 滚动到底部翻页 效果，具体内容如下所示：html：【{{item.code||item.name}}】{{item.name}}js:先写滚动事件handleScroll(){let scrollTop = this.$refs.scrollTopList.scrollTop,clientHeight = this.$refs.scrollTopList.clientHeight,s...
vue判断当前是PC端还是手机端，加载不同组件库
贵林之恋的博客
02-03 940
【代码】vue判断当前是PC端还是手机端，加载不同组件库。
北京政务服务平台（Ionic/Vue3 移动端） 问题记录
Lyrelion的博客
09-19 1102
北京政务服务平台（Ionic/Vue3 移动端） 问题记录
vue elementUI table表格数据 滚动懒加载的实现方法
01-19
vue+elementUI table表格展示数据，当数据很多的时候，不能一页显示完，同时一次请求数据量太大，会增加网页渲染的时间，影响体验， 这个时候常常有两种方法处理， 1、分页，如下   2、如果我不想分页，又想在一页...
Vue下滚动到页面底部无限加载数据的示例代码
08-27
本篇文章主要介绍了Vue下滚动到页面底部无限加载数据的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法
10-18
下面小编就为大家分享一篇Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue-data-loading-无限滚动和向下/向上加载数据的另一个组件。-Vue.js开发
05-27
vue-data-loading中文文档无限滚动和下拉/上拉以加载数据的另一个组件。 这是一个演示：HackNews安装npm install vue-data-loadi vue-data-loading中文文档另一个用于无限滚动和下拉/上载以加载数据的组件。 这是一...
vue使用mint-ui实现下拉刷新和无限滚动的示例代码
08-28
本篇文章主要介绍了vue使用mint-ui实现下拉刷新和无限滚动的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vueScroll实现移动端下拉刷新、上拉加载
10-17
主要介绍了vueScroll实现移动端下拉刷新、上拉加载，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue2.0 移动端实现下拉刷新和上拉加载更多的示例
08-27
本篇文章主要介绍vue2.0 移动端实现下拉刷新和上拉加载更多的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
如何封装了一个vue移动端下拉加载下一页数据的组件
10-17
主要介绍了如何封装了一个vue移动端下拉加载下一页数据的组件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue 使用鼠标滚动加载数据的例子
10-16
今天小编就为大家分享一篇vue 使用鼠标滚动加载数据的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue3鼠标右击事件的插件
最新发布
05-10
可以使用vue-context插件来实现鼠标右击事件，它是一个轻量级的上下文菜单插件，支持鼠标右键单击触发事件。 首先，你需要安装vue-context插件： ``` npm install vue-context --save ``` 然后在你的Vue组件中使用它： ```vue <template> <div> <div v-context:menu="menuOptions"></div> </div> </template> <script> import VueContext from 'vue-context' export default { components: { VueContext }, data () { return { menuOptions: [ { name: '复制', action: () => { console.log('复制') } }, { name: '剪切', action: () => { console.log('剪切') } }, { name: '粘贴', action: () => { console.log('粘贴') } }, { divider: true }, { name: '全选', action: () => { console.log('全选') } } ] } } } </script> ``` 上面的代码中，我们在一个空的div元素上使用了`v-context:menu`指令来触发上下文菜单，传入了一个数组作为菜单选项。每个菜单选项包括一个名称和一个回调函数，这个回调函数会在用户点击菜单项时触发。 你也可以使用`v-context`指令来触发上下文菜单，这样用户在任何地方右键单击都会触发上下文菜单。例如： ```vue <template> <div v-context="menuOptions"> 右键单击这个div触发上下文菜单 </div> </template> ``` 更多的配置选项可以参考vue-context的文档：https://github.com/rawilk/vue-context

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

街尾杂货店&

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值