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 条评论
登录 后参与评论

相关文章

来自专栏GIS讲堂

Openlayers3中SVG图加载

鉴于SVG的优势,在图层展示的时候,会想到SVG的方式,但是OL3里面只支持ImageStatic的方式加载,也就是只能加载栅格图片,为此,本文实现Openla...

2284
来自专栏xingoo, 一个梦想做发明家的程序员

CSS 之 选择器

选择器 类型选择器 也叫做 元素选择器和简单选择器,可以根据元素标签指定样式。 p { color:red; } 类选择器 一般用于某些同类型的样式。 .xxx...

2129
来自专栏扎心了老铁

JavaScript实现模糊推荐的input框(类似搜索框)

如何用JS实现一个类似搜索框的输入框呢,再填充完失去焦点时,自动填充配置项,最终效果如下图: ? 实现很简单,但是易用性会上升一大截,需要用到的有jquery-...

6609
来自专栏专业duilib使用+业余界面开发

duilib中获取的控件的位置或者大小不对的可能的原因

2584
来自专栏Android干货

小程序实践(九):返回到上一个界面并传值回去

常见需求,修改某个信息,需要调到一个新界面有个输入框去修改内容,修改之后,点击后退按钮,新的数据就返回更新了

2053
来自专栏无原型不设计

在 Mockplus 设置页面链接,实现页面交互

在Mockplus中,可以轻松设置页面链接,方法有二:   一、直接拖拽 1 点击某个组件,此时组件上方出现小工具栏。 2 拖拽(点击后不放手)小工具栏...

2957
来自专栏ZKEASOFT

纸壳CMS在线编辑样式

纸壳CMS可以在页面设计界面,可视化修改页面内的可见元素的样式,在线编辑样式。点击组件工具栏上的“自定义样式”按按钮打开样式编辑对话框:

1804
来自专栏林德熙的博客

win10 uwp ApplicationView

本文和大家介绍一个重要的类,他可以用来设置窗口,如设置启动大小,设置是否允许截图,是否进入全屏,所有和窗口有关的,都可以在他这里设置。

922
来自专栏coding

transition-group实现动画效果

如果要实现动画效果的元素是通过v-for循环渲染出来的,就不能使用transition,应该用transition-group将元素包裹

901
来自专栏用户2442861的专栏

PyCharm常用快捷键

Ctrl + NumPad+/- 展开或者收缩代码块 Ctrl + Shift + NumPad+ 展开所有的代码块 Ctrl + Shift + NumPa...

2501

扫码关注云+社区

领取腾讯云代金券