el用走马灯做图片box的翻页

代码银月使
• 阅读 1362

用el走马灯组件做图片的翻页效果,并具有预览功能。

el用走马灯做图片box的翻页el用走马灯做图片box的翻页

1.拿到el内部组件image-viewer做自定义的预览功能。

<el-image-viewer
      v-if="showViewer"
      :initial-index="initialIndex"
      :on-close="
        () => {
          handleViewer(false);
        }
      "
      :url-list="urlList"
    />
import ElImageViewer from 'element-ui/packages/image/src/image-viewer';

2.走马灯组件里的el-image组件添加lazy属性会导致图片加载失败。

补充:
可以用initial-index属性指定预览图片下标

点赞
收藏
评论区
推荐文章
美凌格栋栋酱 美凌格栋栋酱
7个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
4年前
一篇文章帮助你理解跑马灯的滚动原理
走马灯效果其实就是利用标签进行图片和文字滚动,设置的样式不一样,滚动的效果就不一样,实现“走马观花”的效果。一、滚动方式1\.普通滚动Document这里是您要填的内容1.1 文字碰到左边就会停止这里是您要填的内容1.2 文字碰到右边就会停止这里是您要填的内容2.图片滚动2.1 预设滚动图片滚动到右边界,自动再
梦
4年前
微信小程序new Date()转换时间异常问题
微信小程序苹果手机页面上显示时间异常,安卓机正常问题image(https://imghelloworld.osscnbeijing.aliyuncs.com/imgs/b691e1230e2f15efbd81fe11ef734d4f.png)错误代码vardate'2021030617:00:00'vardateT
java一生之敌 java一生之敌
2年前
JVM的内存模型和优化方式
一、JVM的内存模型1.!图片(https://imghelloworld.osscnbeijing.aliyuncs.com/imgs/52b2220f04010eb329efbef966f9fa40.png)其中s0,s1为幸
九路 九路
4年前
一个爬虫的故事:这是人干的事儿?
本文转载自轩辕之风的文章,链接https://mp.weixin.qq.com/s/YygbUWpa2mbPZPuPNhdt2w爬虫原理我是一个爬虫,每天穿行于互联网之上,爬取我需要的一切。image.png(https://imghelloworld.osscnbeijing.aliyuncs.com/imgs/656d
Easter79 Easter79
3年前
Taro小程序自定义顶部导航栏
微信自带的顶部导航栏是无法支持自定义icon和增加元素的,在开发小程序的时候自带的根本满足不了需求,分享一个封装好的组件,支持自定义icon、扩展dom,适配安卓、ios、h5,全面屏。我用的是京东的Taro多端编译框架写的小程序,原生的也可以适用,用到的微信/taro的api做调整就行,实现效果如下。!在这里插入图片描述(https://i
Wesley13 Wesley13
3年前
viewer与 iview Carousel(走马灯) 结合使用,图片无法显示
问题原因:iview Carousel(走马灯)在加载是如果没有图片它没有高度。之后给src赋值,图片无法显示,拖动一下浏览器宽或搞它就会显示。走马灯解决这个问题方法:1在Carousel或其父组件上使用vif;2修改iview源码。然而,使用vif后会导致 viewer 组件无法显示图片。实际业务代码:!(https://oscim
Wesley13 Wesley13
3年前
HTML5+CSS3制作无限滚动与文字跳动效果
㈠用HTML5CSS3做无限滚动效果⑴逻辑分析!(https://img2018.cnblogs.com/blog/1746290/201909/1746290201909232245582391180041720.png)⑵实践示例前5张图片为所有图片显示区,假设总长度为1100px;
Stella981 Stella981
3年前
Echarts实战案例代码(21):front
!在这里插入图片描述(https://oscimg.oschina.net/oscnet/upbb36608c997dc54f791633a1ba3e2e24.png)场景需求:layui弹出模态框,显示数据记录。解决方案:选择layuitable组件laypages应该是比较无缝的对接,但是laypages组件的翻页需要后台参数的配合。