专业网站建设制作公司哪家好,网站托管 域名,西安紧急通知,无锡专业网站制作的公司参考效果
当轮播图滑动切换的时候更新自定义下标#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
