专栏首页vue学习27、有赞Vant组件库的引入及轮播图片预览的实现②

27、有赞Vant组件库的引入及轮播图片预览的实现②

前言:上一章主要是安装并引入了vant组件库;这章我们完成商品详情页轮播图片的预览功能。其实图片预览功能自己写也很简单,我可能比较懒。。。 Github:https://github.com/Ewall1106/mall

1、图片预览组件ImagePreview

这个vant组件与其它组件的引入方式不同,不需要在main.js中引入,直接在页面中引入即可:

ImagePreview和其他组件不同,不是通过HTML结构的方式来使用,而是通过函数调用的方式,使用前需要先引入它。

引入

2、使用

(1)首先我们为轮播图添加点击事件

为轮播图添加点击事件

(2)然后我们使用ImagePreview组件实现图片预览的功能(当点击图片的时候调用),实现的方式很简单, 直接传入图片数组即可实现图片预览

传入图片数组实现图片预览

(3)最后还有一点小问题,就是dot焦点的颜色与我们主题色不符合

焦点颜色不对

  • 这个问题其实我们在13章优化轮播图组件与vue深度处理器这一章时已经碰到过了,解决的方法还是使用vue深度处理器;
  • 通过开发者工具查询页面的html结构,我们发现这个dot焦点名为van-swipe__indicator--active,位于<body></body>标签下;

F12开发者工具

  • 所以我们需要在App.vue中使用vue深度处理器改变这个焦点的颜色,把它设置为我们的主题色。

改变焦点色

3、小结

至此,我们使用vant组件完成图片预览的功能就完全实现了;是不是很简单?反正比自己写应该简单多了。

轮播图片预览的实现

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 12、vue-awsome-swiper与轮播图组件

    1、上篇我们为了便于展示,把头部my-header组件放在了App.vue页面,现在我们删掉App.vue里面的头部组件然后我们在view文件里面新建一个hom...

    Ewall
  • vue-cli安装、node-sass安装、mintUI组件库安装

    1、使用淘宝npm镜像 在node中很多安装失败的原因就是因为国内网络限制因素,所以使用淘宝镜像有利于解决这方面问题。(使用了翻墙、vpn,用install命...

    Ewall
  • 复制文字到剪贴板—Vue-clipboard2

    Ewall
  • MYSQL增量备份和全量备份脚本分享

    全量备份:可以使用mysqldump直接备份整个库或者是备份其中某一个库或者一个库中的某个表。

    用户3479834
  • Mysql备份系列(2)--mysqldump备份(全量+增量)方案操作记录

    在日常运维工作中,对mysql数据库的备份是万分重要的,以防在数据库表丢失或损坏情况出现,可以及时恢复数据。 线上数据库备份场景: 每周日执行一次全量备份,然后...

    洗尽了浮华
  • 怎么搭建短视频系统?全套负载均衡方案

    短视频系统跟直播系统有一样的特点,面向的用户群体数量较大,聚集时间点集中。比如午饭时间,晚上休闲时间。所以做好系统的负载特别重要,既能提高系统的稳定性和可用性,...

    球446527153
  • Jenkins构建工具集成

    泽阳
  • Jenkins实践文档-第四章 构建工具集成

    泽阳
  • ubantu命令行安装nginx 转

    用户2603479
  • jQuery实现验证码倒计时

    wePanda

扫码关注云+社区

领取腾讯云代金券