element-plus 之el-carousel 走马灯 加载图片刚进入的时候为什么数据显示不对？

最新推荐文章于 2024-04-02 14:48:01 发布
最新推荐文章于 2024-04-02 14:48:01 发布
阅读量800 收藏
点赞数 1
文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43136717/article/details/128233256
版权

场景：

使用了element-plus 里的 el-carousel，放置滚动广告，根据文档，设置type="card"即可出来效果；

问题：

假设我是6张图，可是首次进入页面的时候显示是这样的，需要滚动一次才会显示正常，为什么？

在这里插入图片描述

原因：

其实很简单，el-carousel绑定的数据，需要一个初始值。如果你写成了这样var bannerList = ref([]); 那么就会出现异常，
可以写成var bannerList = ref([1，2，3]); 开始就是三张图了 ^- ^

、Diamond
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【element】el-carousel走马灯一个页面放多个元素展示
jieweiwujie的博客
02-10 5506
<template> <div> <el-carousel indicator-position="outside" :autoplay="false"> <el-carousel-item v-for="item in result" :key="item" class="carousel-content" > <div v-for="(el, i...
react-native-snap-carousel：React Native的Swipercarousel组件，具有预览，多种布局，视差图像，对大量物品的高性能处理等。 与Android和iOS兼容
02-24
React本机快照轮播 :sparkles: 插件用户，对您来说是个好消息！ :light_bulb: 前往以了解更多关于您的方式带来的好处。 目录 展示柜 :raising_hands: 新功能：布局 真实的例子 这些是我们创建的实时应用，它们大量使用了插件。 不要害羞，如果您做的很棒，请与他人分享！ :handshake: 维护者想要 嘿， 自2016年以来，创建和维护此插件一直是一个有趣的旅程。我们感谢大家的赞赏并充分利用了它！ 您激励我们花了无数时间来改进插件，并使我们很高兴回馈开源社区。 简而言之，我们喜欢这个项目。 但是，我们目前无法给予它应有的爱和需要的照顾。 如果您有足够的时间和知识，并且想成为一名维护者，请告诉我们。 :light_bulb: 。 我们并没有放弃这艘船，但是我们需要更多的人来帮助我们保持它的生命和健康！ 用法 $ npm install --save react-native-snap-carousel 如果您使用的是Typescript，则还应
element-plus走马灯不显示
weixin_63681863的博客
10-29 811
依赖正确，代码用法正确，但是element-plu走马灯就是不显示！！并且盒子的宽度总是0。
vue3+element-plus(el-carousel)实现图片轮播和点击预览功能
最新发布
大数据-攻城狮
04-02 686
vue3+element-plus(el-carousel)实现图片轮播和点击预览功能
【最简便方法】element-plus/element-ui走马灯配置图片以及图片自适应
STATICHIT静砸的博客
11-13 8160
首先展示官网给的模板。
在vue3 ＜script setup＞＜/script＞中使用Element走马灯组件遇到的问题
de_yi_xaio的博客
09-11 392
中使用Element走马灯组件点击按钮报错不能使用的问题。但是这种写法在vue3 中不适用，直接报错“carousel”获取不到；首先在vue3
修改element-ui走马灯按钮样式，outline: none；不生效，scss公共路径的使用，scss的样式继承 @extend，vue在tab切换或页面跳转时取消上次的接口请求
为写出赏心悦目、容易维护的代码而探索
05-08 657
有点意思，还能这样……修改element-ui走马灯按钮样式，outline: none;不生效，scss公共路径的使用，scss的样式继承@extend，vue在tab切换或页面跳转时取消上次的接口请求
(Carousel)解决：Element-ui 中 Carousel 走马灯的样式的修改问题
狮子座的男孩
09-11 1万+
【代码】(Carousel)解决：Element-ui 中 Carousel 走马灯的样式的修改问题。
element el-carousel 轮播图分页，一页显示n条
weixin_44801678的博客
11-11 2804
element el-carousel 轮播图分页，一页显示n条 html <el-carousel trigger="click" height="650px" :autoplay='false'> <el-carousel-item v-for="(item,index) in productRecommendationList" :key="index">
教程6 Vue3+Element Plus el-carousel制作轮播图（后面有修改样式的方法）
boxuestudio的博客
03-10 7087
教程6 Vue3+Element Plus el-carousel制作轮播图
Element Carousel 走马灯的具体实现
12-28
本文来源于Element官方文档： http://element-cn.eleme.io/#/zh-CN/component/carousel ...普通走马灯 默认 Hover 指示器触发 <el height=150px> <el v-for=item key=item> <h3>{{ item }} </el> </el> <div
Why-Not-Image-Carousel:如果要显示很多图像，为什么不使用图像轮播呢！
03-08
为什么不！ 图片轮播！ 适用于Android的简单，超级简单且可自定义的图像轮播视图。预览截屏预览用法相依性将以下内容添加到您的项目级别的build.gradle文件中。 dependencies { // Material Components for Android....
ft-carousel.js图片无缝轮播切换代码
06-09
ft-carousel.js图片无缝轮播切换代码是一款结合jQuery实现的焦点图无缝轮播插件。
react-infinite-carousel:通过延迟加载和响应式支持来响应简单的无限轮播
05-02
通过延迟加载和响应式支持来React简单的无限轮播。 安装 npm install react-leaf-carousel 例子 import React from 'react' ; import ReactDOM from 'react-dom' ; import InfiniteCarousel from 'react-leaf-...
ElementUi轮播图走马灯添加图片
热门推荐
Software As Business
05-14 2万+
ElementUi轮播图走马灯添加图片官网例子改造适用效果 官网例子 这里我们拿官网的例子作为讲解 链接: 官网. 代码 <template> <el-carousel :interval="4000" type="card" height="200px"> <!--此处注意，v-for 是一个固定的数，要想显示图片，我们就应该让item循环一个ImageList --> <el-carousel-item v-for="item in 6" :k
记录一次Vue3.0引入ElementPlus之后样式不生效的一个大坑
m0_67401761的博客
03-07 3944
事情是这样的，我呢，主要是做后端的，很少碰前端，而且真心不擅长前端，每次碰都特别痛苦。但是最近实在是有点闲，为了能优化一下我前一阵做的一个服务型项目，准备加几个页面实现配置业务参数和查询执行记录之类的功能。所以上网看了看教程，搭了一个VUE3.0的项目，并且准备用ElementUI为VUE3.0推出的ElementPlus作为UI库。 于是我就按照教程，使用VUE/CLI脚手架搭了一个项目，并且配置了vue.config.js的配置文件（这里画个重点要考的！），然后按部就班配置了vue-router和ele
vue+element-ui carousel走马灯一次轮播(显示)5张图片
weixin_58860430的博客
09-09 1万+
vue+element-ui carousel走马灯一次轮播(显示)5张图片
iCarousel图片乱序问题的解决办法
czj35030319891010的专栏
05-09 657
https://github.com/nicklockwood/iCarousel
element-plus carousel 走马灯图片大小
08-31
根据引用中提到的，使用element-plus的el-carousel组件来放置滚动广告时，可以通过设置type="card"来实现效果。至于走马灯图片的大小，文档中并没有具体说明。 根据引用中的解决方法，可以为carousel组件添加显示条件list.length > 0，只有当list不为null且长度大于0时才会渲染元素。这意味着走马灯图片的大小可能取决于绑定给el-carousel的数据list中的元素数量和大小。 引用中提到，el-carousel绑定的数据需要一个初始值。如果初始值为空数组([])，可能会出现异常。所以可以通过为初始值提供一些图片元素，比如var bannerList = ref([1, 2, 3])，来确保开始时就有一些图片展示在走马灯中，从而确定走马灯的图片大小。 综上所述，element-plus carousel走马灯的图片大小是由绑定给el-carousel的数据中的图片元素数量和大小决定的。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [element-plus 之el-carousel 走马灯 加载图片刚进入的时候为什么数据显示不对？](https://blog.csdn.net/weixin_43136717/article/details/128233256)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [Vue3 + Element-Plus carousel走马灯 显示动态数据时 默认会显示一个空白元素](https://blog.csdn.net/qq_40007006/article/details/120440831)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值