解决iview的Carousel组件初始加载时无法显示的问题

最新推荐文章于 2024-05-13 15:52:26 发布
最新推荐文章于 2024-05-13 15:52:26 发布
阅读量4.5k 收藏 2
点赞数 4
分类专栏： iview
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42643176/article/details/90899536
版权

先看问题：

    

 

开始这一部分内容是隐藏的，所以又一个loading的加载效果，问题出在加载完后Carousel组件部分居然啥都没有.....

？？？

然后小小的动一下窗口

？？？

？？？

然后看一下DOM才发现Carousel的轮播容器没有宽度，但数据是存在div内部的，就是无法正常显示出来。

这个位置是Carousel组件的内部容器，这里在渲染的时候正常情况下应当是有一个总宽度的，而.ivu-carousel-track内的.ivu-carousel-item这个div也是没有宽度的。获取不了宽度，也就无法正常显示。但是问题并不是由这里引起的。

包含Carousel的父组件在初次被渲染时处于隐藏状态，而Carousel也同时被隐藏起来，两个组件无法同时渲染的话，就造成类似的问题，Carousel组件内其实是在正常工作的。

解决方式：

给Carousel加上v-if让二者同时渲染就好啦。

如果有什么不对的地方欢迎指正～～

 

 

我走路带风_
关注
  • 4
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
iview的走马灯嵌套在模态框中，宽度为0的解决方案
weixin_43990297的博客
05-26 801
在项目开发中用到了iview的走马灯嵌套在模态框中这种需求，结果发现走马灯图片不显示，打开控制台审查元素发现走马灯的内部盒子width为0，自己感觉在页面初始化的时候，因为模态框初始值为false，所以，走马灯渲染的时候错误的动态计算了宽度，为0，所以解决方案为让模态框和走马灯通过统一状态控制，同时渲染。你可以将Modal 的v-model="imgVisible"这个状态值同步到走马灯的<Carousel v-if="imgVisible"></Carouse>,或者如下，图片集合
vue开发中，数据还没获取，页面已经渲染，导致页面没有数据
热门推荐
weixin_48677331的博客
12-28 2万+
在使用vue的时候，经常会遇到这种问题：异步请求，或者是通过组件传值获取数据时，部分页面会在数据获取之前就渲染，导致数据加载不出来。 如何解决？ 使用 v-if 根据需求,可以在vue生命周期beforeCreate，created的时候就调用接口获取数据，在成功拿到数据之后的回调函数里面，控制页面显示，可以最大程度上避免页面跳动的问题。由于渲染和请求是异步的，我们可以等到数据请求回来之后，再把页面放出来。 上代码 <h4 v-if="isShow">{{ data }}</h4>
手把手带你开发一个易用又灵活的 Carousel 组件
最新发布
OpenTiny的博客
05-13 873
其实组件的很多其他部分也可以外溢出去，包括子组件、内部方法、TypeScript类型等，将这些能力外溢，把自主权交给开发者，可以有效地增加组件的灵活性，让我们设计的组件既是“易用的”，又是“灵活的”，在易用性和灵活性之间取得一定的平衡。点击上一页、下一页，不仅页码会变化，上面的轮播内容也会跟随变化，基础功能已实现，接下来就是完善分页器样式，并增加页码指示器，让 Carousel 组件的功能更加完整。在实现具体的组件功能之前，我们先创建一个空的组件结构，走通组件本地效果预览的流程。
Vue.js条件渲染指令v-if及v-show
m0_61961937的博客
04-21 7566
是真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当的销毁和重建，v-if也是惰性的，如果在初始渲染时条件为假，则什么都不做，直到第一次变为真时，才会开始渲染条件块。可以看出v-if隐藏的内部元素不会被显示，Vue.js不会尝试生成对应的html代码，而v-show是通过css的display：none来控制的。一般来说，v-if每次插入或者移除元素时都必须生成元素内部的DOM树，因此具有更高的切换开销，而v-show有更高的初始渲染开销。值得注意的是，v-show。
使用 iview 组件 Carousel 制作首页轮播图
weixin_48674314的博客
08-24 1976
当我们需要制作轮播图时，一般是使用插件Swiper。 npm i swiper 但是现在iview 中自带了Carousel组件可以制作简单的轮播图，操作起来十分简单。 这是官方给出的Api： 代码如下： <Carousel :loop="true" :autoplay="true" :autoplay-speed="3000" arrow="never" > <CarouselItem> <img class="img" src="~@/i.
iview中轮播图组件在loop自动播放时，添加的点击事件有时不触发
zw_wen的博客
10-20 996
问题描述：使用iview中的Carousel组件并开启自动播放loop时，点击每个轮播图片时进行对应事件处理；但是轮播循环一周后，点击轮播图片时点击事件并没有触发； 刚开始时点击事件添加在每个轮播块CarouselItem上；代码如下： <Carousel class="Carousel-list" :autoplay="getAuto" loop :radius-dot="false" :autoplay-speed="2500" arrow="always"> <Caro
iview的日历组件，iview的日历组件
02-01
在前端开发领域，`iView` 是一个广受欢迎的 Vue.js UI 框架，它提供了许多优雅且易于使用的组件，极大地提升了开发效率。本文将深入探讨 `iView` 的日历组件，帮助开发者理解其核心功能、用法以及如何在实际项目中...
解决iview table组件里的 固定列 表格不自适应的问题
01-18
当在使用iview Table组件里固定列功能时 出现表格不自适应宽度问题 具体如下 解决这个bug 很简单 把组件里的 width 改为 minWidth 即可 columns: [ { title: '账户名', key: 'accountName', fixed: 'left', ...
vue iview的菜单组件Mune 点击不高亮的解决方案
10-16
在Vue.js应用中，特别是在使用iView UI框架开发时，我们可能会遇到菜单组件Menu在点击后不显示高亮效果的问题。这个问题通常是由于Vue Router的配置或组件自身的样式冲突导致的。下面将详细介绍如何解决这个问题。 ...
解决iview打包时UglifyJs报错的问题
10-18
下面小编就为大家分享一篇解决iview打包时UglifyJs报错的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决iView Table组件宽度只变大不变小的问题
01-18
打开开发者工具其实你可以发现iView给table标签的宽度加上了一个明确的宽度值，而且在父元素变小的时候这个值并没有相应地变小，所以才会导致的iView Table组件只会变大不会变小。 那么我们就可以根据这个原因才决定...
iView多效果图片与文字切换特效
12-06
iView多效果图片与文字切换特效，不支持IE6
vue iView 上传组件之手动上传功能
08-27
在Vue.js框架中，iView是一个非常受欢迎的UI组件库，尤其适合于PC端的中后台业务。iView提供了一套完整的高质量、功能丰富的组件，包括我们今天要讨论的上传组件。手动上传功能允许开发者更加灵活地控制文件上传的...
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
10-17
为了解决这个问题，我们需要确保子组件在Modal显示时能够重新编译，以获取最新的数据。这时，使用`v-if`代替`v-show`就显得尤为重要。`v-if`会根据其表达式的真假值来决定是否创建或销毁对应的DOM元素，因此，每次...
基于iview二次封装实用组件
04-14
- **性能优化**：大型项目中，过多的组件实例可能导致页面加载变慢，这时可以考虑使用懒加载、虚拟DOM等技术提高效率。 - **组件复用**：封装的组件应具有足够的通用性，以便在多个地方重复使用，避免代码冗余。 ...
Iview Table组件中各种组件扩展的使用
10-17
例如，当行状态为'1'时显示可操作的Poptip，否则显示禁用的图标。 ```javascript { title: '撤销', key: 'operate', width: 70, fixed: 'right', render: (h, params) => { if (params.row.status === '1') {...
iview 实现一个CarouselItem放多个div
票票的博客
05-22 809
iview + vue实现功能 html代码 <Carousel v-model="value" loop> <CarouselItem v-for="(item,index) in result" :key="index" style="display: grid; grid-template-columns: repeat(2, 1fr)"> <div v-for="(el,ind) in item" :key="ind"> ..
iview carousel 图片不显示；iview 轮播图 图片无法显示（转载）
weixin_30740295的博客
07-26 2623
转载来源：https://segmentfault.com/q/1010000016778108 相关代码 <Carousel autoplay v-model="value2" v-if="uploadList!=''" loop> <Carousel-Item v-for="(item,index) in uploadLi...
关于Vue使用element-ui中走马灯图片无法显示的问题
m0_51137496的博客
03-12 2881
上代码 <template> <div class="img-box"> <el-carousel :interval="4000" type="card" height="600px" width="100%"> <el-carousel-item v-for="item in imgList" :key="item.id"> <img :src="item.url" height="360px
iView前端组件库：文档详解与实战应用
4. 完整文档支持：为了帮助开发者快速上手，iView提供了详尽的文档，覆盖了组件使用、配置、API参考等多个方面，便于开发者查阅和解决问题。 5. 自定义主题选项：为了让用户拥有更个性化的体验，iView还支持自定义...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值