IVIEW走马灯内容刷新错误

最新推荐文章于 2022-06-24 08:59:54 发布
最新推荐文章于 2022-06-24 08:59:54 发布
阅读量834 收藏
点赞数 2
CC 4.0 BY-SA版权
分类专栏： 前端 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/nineleafclover/article/details/105218551
本文解决了一个关于IVIEW走马灯组件在更新table内容时出现的新旧数据混杂展示的问题。当走马灯的loop属性启用时，组件会创建两个栈来循环展示内容，数据更新仅影响第一个栈，导致展示时新旧数据交替出现。解决方案是移除loop属性。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

IVIEW走马灯内容刷新错误

问题


走马灯内显示内容为table，tables中每个table显示一页。但当table内容改变时，展示的内容却是新旧数据循环展示。但是走马灯页数为新数据的页数。
例如原来显示10页，新的数据有2页，显示的顺序为：
新1 ------> 新2-------->旧1------------>旧2 ------------->新1

解决方法：删除走马灯loop属性。
当loop属性存在时，走马灯会创建两个展示内容栈循环展示，但是当数据改变后，只更新了第一个栈，导致在展示第二个栈的时候，数据为旧数据。（或许是本人不会用0.0）

marquee 循环空白解决方案完整代码+效果图
a_靖的博客
05-06 3198
跑马灯无间隙无效循环滚动效果图： 本篇文章要实现的是跑马灯无间隙无效循环滚动； marquee 标签滚动完一次以后，第二次会空白一个屏幕宽度才开始，而我们的需求是接在后面马上开始。我在网上找了一圈，没有发现能满足需求的属性，于是自己写逻辑了。 注释： 以下代码块的内容部分，应该填充跑马灯需要滚动的内容，自己随便填充。 示例：我的是for循环遍历的内容 默认跑马灯代码（如果可以接受有留白，用这代码就行，不用往后看） <marquee direction="left".
Vue实现简单的跑马灯
10-15
主要为大家详细介绍了Vue实现简单的跑马灯，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue iview 实现走马灯效果,点击左右切换
weixin_47239395的博客
11-04 2496
<template> <div> <div class="back_add"> <div class="threeImg"> <div class="Containt"> <div class="iconleft" @click="zuohua"> <i class="el-icon-arrow-left"></i>
利用Vue制作一个简单的走马灯
weixin_42151066的博客
03-27 792
前言： 在制作当前走马灯之前需要了解Vue的基础用法 如果已经学完了Vue的基础用法就可以开始制作走马灯拉~(^ _ ^)∠※ 首先我们先把网页的静态布局以及基本的调用写处理 <head> <meta charset="utf-8"> <title></title> </head> <body> &lt...
viewer与 iview Carousel（走马灯） 结合使用，图片无法显示
weixin_30566149的博客
07-26 3933
问题原因：iviewCarousel (走马灯)在加载是如果没有图片 它没有高度。之后给src赋值，图片无法显示，拖动一下浏览器宽或搞它就会显示。 走马灯解决这个问题方法：1在Carousel或其父组件上使用v-if；2修改iview源码。然而，使用v-if后会导致viewer 组件无法显示图片。 实际业务代码： <Tab-Pane label="草本...
iview 走马灯Carousel 没有无缝滚动
最新发布
12-27
### 实现 iview Carousel 组件的无缝滚动 为了使 `iview` 的 `Carousel` 组件支持无缝滚动，可以考虑集成第三方库或自定义逻辑。一种有效的方法是引入 `vue-seamless-scroll` 插件[^3]。 #### 方法一：使用 vue-...
使用iview的Carousel 走马灯组件时，echarts图表无法自适应宽度问题解决
HuLuWa1997的博客
09-03 1520
在我实现轮播含有echarts图表的页面时出现了，当从别的页面回到轮播效果的页面时，echarts无法自适应宽度，刷新一下之后，显示正常。 解决方法就是在echarts上面加上v-if(v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。) 代码如下： <Carousel v-model="value1"> <CarouselItem> <div class="demo-carousel">
iview vue走马灯
09-08
使用iview的走马灯组件可以实现图片轮播、文字滚动等效果。你可以按照以下步骤来使用iview的走马灯组件： 1. 首先，确保你已经安装了iview，可以通过npm或yarn进行安装： ``` npm install iview --save ``` 2. 在...
使用 iview 实现PC端生成推广海报与二维码并下载的功能，基于iview Modal 对话框 与 Carousel 走马灯组件实现
qq_42341171的博客
11-14 1146
使用 iview 实现PC端生成推广海报与二维码并下载的功能，基于iview Modal 对话框 与 Carousel 走马灯组件实现 前言：最近在对公司网页进行改版的时候遇到一个问题，需要在PC端实现一个功能，生成三张推广海报和用户邀请链接的二维码，由于有三张推广海报的背景图可供用户选择下载，于是我想到一个实现的方法：点击 “一键生成推广海报” 按钮，弹出一个模态框，里面是一个由三张背景图组成的...
使用vue+iview构建项目遇到的问题总结（一）
csdn_haow的博客
08-30 3310
使用vue+iview构建项目遇到的问题总结（一） 1.Select组件点击无响应问题 Select组件放在栅栏组件Col里，发现点不动，原因：Select组件最终会被解析为一个span+i+ul+li的原生dom,如果和Select组件所处组件Col位列同级的右兄弟组件Col没有给一个宽度span，则会影响Select组件的点击事件。 2.Table组件渲染表头提示you may ...
iview中轮播图组件在loop自动播放时，添加的点击事件有时不触发
zw_wen的博客
10-20 1144
问题描述：使用iview中的Carousel组件并开启自动播放loop时，点击每个轮播图片时进行对应事件处理；但是轮播循环一周后，点击轮播图片时点击事件并没有触发； 刚开始时点击事件添加在每个轮播块CarouselItem上；代码如下： <Carousel class="Carousel-list" :autoplay="getAuto" loop :radius-dot="false" :autoplay-speed="2500" arrow="always"> <Caro
初学VUE 走马灯效果
lwaweb的博客
11-06 285
初学VUE 走马灯效果 很简单的走马灯效果 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &...
解决vue使用swiper轮播echarts组件，loop模式下，第二次出现空白问题
m0_57982282的博客
06-24 1224
如题，loop模式下复制的canvas未进行绘制。 在百度了很多解决办法，包括使用class进行init，去掉echarts的echarts_instance属性等方法，都没有解决这问题。最后我的解决办法如下 将echarts的渲染模式，从canvas改为svg ...
vue使用iView实现轮播
鹏飞的技术博客
08-23 7624
一般在 webpack 入口页面 main.js 中如下配置： import VueRouter from 'vue-router'; import iView from 'iview'; import 'iview/dist/styles/iview.css'; // 使用 CSS Vue.use(VueRouter); Vue.use(iView);   然后去官网选择粘贴 h...
vue中实现上下滑动文字通告的功能
weixin_42790916的博客
10-23 8281
&amp;amp;lt;template&amp;amp;gt; &amp;amp;lt;div class=&amp;quot;marquee&amp;quot;&amp;amp;gt; &amp;amp;lt;div class=&amp;quot;marquee_title&amp;quot;&amp;amp;gt; &amp;amp;lt;span&
vue 大屏滚动实现 利用marquee和element-ui table
weixin_30835649的博客
07-05 4050
以上方法 有点LOW ，如果有别的方案评论区讨论 从中遇到的问题 就是 你不能打乱 table和 tbody 的嵌套规则 必须满足以下
iviewUI使用中遇到的问题与解决方案（一）
热门推荐
驚鴻入梦
01-03 1万+
项目中使用的iviewUI的版本是2.7.3，在使用中遇到的问题总结了一些，后续会更新，如果各位大神有遇到的坑欢迎评论补充1、modal的样式要放到最外面，否则样式给不到；2、iview组件的事件@on-change=fn,fn后面没有‘(参数)’；3、router-view不能放到tabs里面，组件会渲染两次，要把它单独拿出来4、FormItem里面input或者select不能用:model动
marquee一行代码实现滚动跑马灯效果无需js
流绪@微梦
02-21 481
最近ytkah决定拓展一下业务，贴补一些家用，(@^_^@)，将以前做的网站建设案例展现出来，有这方面需求的朋友可以扫一下二维码加我哈，或者推荐朋友给我，有奖励噢！网站设计案例展示一般用幻灯片切换会比较高大上，但这需要用到js，第三方博客等网站不支持外嵌js，或者有些网友不知道怎么用，有一种方法可以解决，用标签，可以实现多种滚动效果，无需js控制。marquee标签不仅可以滚动文字，也可以滚动图片...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值