vue 实现数据滚动显示_vue 滚动加载数据

最新推荐文章于 2024-02-20 16:29:42 发布
最新推荐文章于 2024-02-20 16:29:42 发布
阅读量640 收藏
点赞数
文章标签： vue 实现数据滚动显示
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39667801/article/details/111506733
版权

table数据多的时候打开页面会加载一会才显示数据，这样体验不好，所以要做滚动加载数据

{ {eventMap[scope.row.eventId] == null ? '--': eventMap[scope.row.eventId].sn}}

{ {eventMap[scope.row.eventId] == null ? '--': eventMap[scope.row.eventId].title}}

{ {eventMap == null || eventMap[scope.row.eventId] == null || eventMap[scope.row.eventId].personalInformation == null ? '--':

eventMap[scope.row.eventId].personalInformation.name}}

{ {materirlName}}

{ {formatType(scope.row.type)}}

{ {formatUseNum(scope.row.useNum)}}

{ {changeTime(scope.row.createOn)}}

下面是js部分

methods: {

init (param) {

let id = param.param && param.param.id

if(id){

this.start = 0

MaterialRecordService.query({param: {baseId: this.baseId,

最低0.47元/天 解锁文章
weixin_39667801
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue2/3 - 实现容器内无限下拉滚动懒加载数据，vue下拉滚动无限加载数据功能，支持移动端手滑、pc电脑端滚动条和鼠标拖动，数据列表在一个div元素内进行滚动懒加载（详细示例代码，一键复制开箱即用
高级前端工程师
04-30 3707
vue3，vue2，nuxt，无限下拉滚动加载，懒加载，vue数据懒加载，vue3实现无限滚动加载数据，vue实现下拉滚动无限加载数据，Vue实现列表虚拟滚动，实现无限滚动加载，使用vue实现滑动滚动条来加载数据，Vue怎么实现div容器里无限滚动加载数据，如何让数据列表限制在一个块元素中，拖动滚动条加载数据，Vue中如何进行滚动加载与无限滚动_vue滚动到底部加载更多，列表的无限循环滚动，实现下拉滚动无限加载，vue非插件实现列表无限循环滚动，Vue向下滚动加载更多数据scroll，局部下拉加载，让一小块
vue 使用鼠标滚动加载数据的例子
10-16
今天小编就为大家分享一篇vue 使用鼠标滚动加载数据的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue实现ajax滚动下拉加载，同时具有loading效果(推荐)
11-27
代码如下所示： <!doctype html> <html> <head> <meta charset="utf-8"> <title>vue测试ajax的使用</title> <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <style> *{ padding:0; margin:0} .list ul li{padding:10px 5px 10px
Vue 实现滚动加载
...
01-15 1278
Vue 实现滚动加载
vue 实现滚动加载
qq_41340792的博客
08-20 549
data(){ return { page：1, categoryList:[], isLoading:false//防止多次请求 } }, mounted(){ this.scroll() }, methods:{ scroll() { window.addEventListener("scroll", ()=>{ // 距离底部200px时加载一次 let bottomOfW
vue实现滚动加载
最新发布
sumimg的博客
02-20 404
本文参考 ： https://blog.csdn.net/wytraining/article/details/122543795。每次在请求完成数据的时候去判断一下当前的 page × pagesize是否已经大于等于接口返回的total值就行了。a.需求：一个页面存在多个表格，但只需对其中的部分表格实现滚动加载。根据plugin-id去获取到对应的表格需要滚动的部分。3.完整的js（给表格加入滚动监听+分页信息的处理）给每个需要滚动加载的表格加入一个plugin-id。2.js（给表格加入滚动监听）
vue elementUI table表格数据 滚动懒加载的实现方法
01-19
vue+elementUI table表格展示数据，当数据很多的时候，不能一页显示完，同时一次请求数据量太大，会增加网页渲染的时间，影响体验， 这个时候常常有两种方法处理， 1、分页，如下   2、如果我不想分页，又想在一页...
Vue下滚动到页面底部无限加载数据的示例代码
08-27
本篇文章主要介绍了Vue下滚动到页面底部无限加载数据的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue2滚动条加载更多数据实现代码
12-28
解析：判断滚动条到底部，需要用到DOM的三个属性值，即scrollTop、clientHeight、scrollHeight。scrollTop为滚动条在Y轴上的滚动距离。...代码：1.vue的实现html:<div class=questionList-content-list> <ul>
vue实现页面滚动到底部刷新
10-16
主要为大家详细介绍了vue实现页面滚动到底部刷新，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue实现动态添加数据滚动条自动滚动到底部的示例代码
08-27
本篇文章主要介绍了vue实现动态添加数据滚动条自动滚动到底部的示例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue 滚动加载
花生日记
06-02 1586
使用该方法还有个好处就是它可以隐藏元素，因为如果我们的组件是一个 button，那么在组件中只有一个元素，但是在v-ui中我们可以隐藏多个元素，这就是因为 handler方法需要进行初始化操作。首先，v-ui中是通过将组件的 button放入到v-ui的 DOM树中来获取组件数据的。因为如果你只对一个组件数据进行更新，而其他的组件数据并没有修改的话，那么当你再次进行更新的时候，它会将当前组件的数据和之前的进行比较，如果之前的数据发生了变化，那么会把这个变化告知给其他的组件。// 发送请求获取数据。
【vue】实现页面滚动加载
loyd3的博客
12-23 2670
需要注意 getBoundingClientRect()这个方法，正是通过这个方法获取元素位置，从而判断是否出现在可视区域。页面内容太多会导致加载速度过慢，这时可考虑使用滚动加载即还没有出现在可视范围内的内容块先不加载，出现后再加载。基本思路就是判断元素是否出现在浏览器的可视区域，出现了就加载请求接口加载内容。但是要求内容块有最小高度。
【Vue】实现无限滚动加载
NineWaited的博客
08-17 9863
滚轮到底实现无限加载，内容包括ElementUI的InfiniteScroll，包括scrollTop，clientHeight和scrollHeight
我自己的vue中实现滚动加载
qq_40178044的博客
11-03 435
// 加载区域 <div class="pullup-tips"> <div v-if="!isPullUpLoad" class="before-trigger"> <span class="pullup-txt">{{isComplete ? '我也是有底线的~' : '上拉加载更多...'}}</span> </div> <div v-else class="after-trigger"> &lt
vue 实现数据滚动显示_01-vue项目之滚动加载数据
weixin_39853210的博客
12-19 452
最近刚结束了一个vue项目，项目中发现了自己很多问题，例如，看到功能就想要使用插件，(⊙o⊙)…，这样是肯定不行呀，哎，用插件可以，自己也得会写呀，现在就记录一下一个不错的滚动加载数据。1.页面布局(重点是 class="listWrapper" 以及 class="list") {{item.name}}￥{{item.price}}￥{{item.ot_price...
vue 滚动加载更多
chensong8331的博客
12-26 3412
vue 滚动加载更多 通过对滚动条高度 浏览器高度 和文档高度的对比来判断执行请求数据接口 &lt;template&gt; &lt;section class="outer_container"&gt; &lt;section class="siteIndex inner_container"&gt; &lt;section&gt; &lt;div v-for=&quo
vue滚动加载数据
05-25
Vue可以通过监听滚动事件来实现滚动加载数据。具体实现的步骤如下： 1. 在`data`中定义一个变量`scrollPosition`表示滚动条的位置，初始值为0。 2. 在`mounted`生命周期钩子中添加滚动事件监听器： ```javascript mounted() { window.addEventListener('scroll', this.handleScroll); }, ``` 3. 在`methods`中定义`handleScroll`方法，该方法会在滚动时被触发： ```javascript methods: { handleScroll() { const scrollHeight = document.documentElement.scrollHeight; const scrollTop = document.documentElement.scrollTop || document.body.scrollTop; const clientHeight = document.documentElement.clientHeight; if (scrollTop + clientHeight >= scrollHeight && this.scrollPosition < scrollTop) { // 加载更多数据 this.loadData(); } this.scrollPosition = scrollTop; }, }, ``` 4. 在`loadData`方法中加载更多数据，并更新视图： ```javascript methods: { loadData() { // 加载更多数据 // ... // 更新视图 this.$forceUpdate(); }, }, ``` 注意，为了避免重复加载数据，需要在`handleScroll`方法中添加判断条件：只有当滚动到底部且滚动方向向下时，才会加载更多数据。同时，也需要在加载数据后调用`$forceUpdate()`方法来更新视图。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值