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

作者 : 开心源码 本文共632个字,预计阅读时间需要2分钟 发布时间: 2022-05-12 共172人阅读

前言:上一章主要是安装并引入了vant组件库;这章我们完成商品介绍页轮播图片的预览功能。其实图片预览功能自己写也很简单,我可能比较懒。。。
Github: 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组件完成图片预览的功能就完全实现了;是不是很简单?反正比自己写应该简单多了。

轮播图片预览的实现 上一篇 目录 已是最后

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 27、有赞Vant组件库的引入及轮播图片预览的实现②

发表回复