原单手表网站,郑州的网络公司有哪些,服装设计80%的人会转行,建设网站所需资料参考效果
当轮播图滑动切换的时候更新自定义下标#xff0c;当图片被点击的时候大图预览。
参考代码
商品详情页轮播图交互
script setup langts
// 轮播图变化时
const currentIndex ref(0)
const onChange: UniHelper.SwiperOnChange (ev) …参考效果
当轮播图滑动切换的时候更新自定义下标当图片被点击的时候大图预览。
参考代码
商品详情页轮播图交互
script setup langts
// 轮播图变化时
const currentIndex ref(0)
const onChange: UniHelper.SwiperOnChange (ev) {currentIndex.value ev.detail.current
}// 点击图片时
const onTapImage (url: string) {// 大图预览方法uni.previewImage({current: url, //图片路径urls: goods.value!.mainPictures, //预览图片列表})
}
/scripttemplate!-- 商品主图 --view classpreviewswiper changeonChange circularswiper-item v-foritem in goods?.mainPictures :keyitemimage taponTapImage(item) modeaspectFill :srcitem //swiper-item/swiperview classindicatortext classcurrent{{ currentIndex 1 }}/texttext classsplit//texttext classtotal{{ goods?.mainPictures.length }}/text/view/view
/template
