uni-app中轮播图实现大图预览

小夏同学呀

已于 2024-01-09 22:39:40 修改

阅读量1k

点赞数 4

分类专栏： uni-app 文章标签： uni-app

于 2024-01-09 22:37:22 首次发布

本文链接：https://blog.youkuaiyun.com/web5219/article/details/135491484

版权

本文介绍了如何在商品详情页中使用Vue的Swiper组件实现轮播图的滑动切换，更新自定义下标，并在图片被点击时触发大图预览功能。展示了相关的JavaScript代码片段和模板结构。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考效果

当轮播图滑动切换的时候更新自定义下标，当图片被点击的时候大图预览。
在这里插入图片描述

商品详情页轮播图交互

<script setup lang="ts">
// 轮播图变化时
const currentIndex = ref(0)
const onChange: UniHelper.SwiperOnChange = (ev) => {
   
  currentIndex.value = ev