27、有赞Vant组件库的引入及轮播图片预览的实现②
本文共 613 字，大约阅读时间需要 2 分钟。
前言：上一章主要是安装并引入了vant组件库；这章我们完成商品详情页轮播图片的预览功能。其实图片预览功能自己写也很简单，我可能比较懒。。。
Github：
1、图片预览组件ImagePreview
这个与其它组件的引入方式不同，不需要在main.js中引入，直接在页面中引入即可：
ImagePreview和其他组件不同，不是通过HTML结构的方式来使用，而是通过函数调用的方式，使用前需要先引入它。
引入
2、使用
（1）首先我们为轮播图添加点击事件
为轮播图添加点击事件
（2）然后我们使用ImagePreview组件实现图片预览的功能（当点击图片的时候调用），实现的方式很简单， 直接传入图片数组即可实现图片预览
传入图片数组实现图片预览
（3）最后还有一点小问题，就是dot焦点的颜色与我们主题色不符合
焦点颜色不对
- 这个问题其实我们在13章这一章时已经碰到过了，解决的方法还是使用vue深度处理器；
- 通过开发者工具查询页面的html结构，我们发现这个dot焦点名为
van-swipe__indicator--active，位于<body></body>标签下；
F12开发者工具
- 所以我们需要在
App.vue中使用vue深度处理器改变这个焦点的颜色，把它设置为我们的主题色。
改变焦点色
3、小结
至此，我们使用vant组件完成图片预览的功能就完全实现了；是不是很简单？反正比自己写应该简单多了。
轮播图片预览的实现
转载地址：http://tyaga.baihongyu.com/
你可能感兴趣的文章
[转载] 高等应用数学问题的matlab求解——第3章 微积分问题的计算机求解
查看>>
大整数比较大小
查看>>
八大排序算法的Java实现
查看>>
IDEA+Maven+Tomcat构建项目流程
查看>>
数据是重要的战略资源，数据同样是产品非常重要的组成部分。淘宝对中国最大的贡献，不只是方便了老百姓购物，而是把中国消费者的消费习惯数据慢慢沉淀下来。...
查看>>
Leetcode Find Minimum in Rotated Sorted Array
查看>>
Python接口测试-使用requests模块发送post请求
查看>>
System.currentTimeMillis()计算方式与时间的单位转换
查看>>
Extra：Variable Types
查看>>
ASP.NET温故而知新学习系列之ASP.NET多线程编程—.NET下的多线程编程Thread中委托的使用（六）...
查看>>
最新整理知识结构图
查看>>
linux安装mysql
查看>>
flask 2 进阶
查看>>
sentences in movies and teleplays[1]
查看>>
【20181023T1】战争【反向并查集】
查看>>
win7网络共享原来如此简单，WiFi共享精灵开启半天都弱爆了！
查看>>
iOS9 未受信任的企业级开发者
查看>>
paper 40 ：鲁棒性robust
查看>>
优化MySchool数据库（事务、视图、索引）
查看>>
使用笔记:TF辅助工具--tensorflow slim(TF-Slim)
查看>>