长春免费网站制作,开发板哪个好,做网站要什么条件,手机单页网站模板参考效果
当轮播图滑动切换的时候更新自定义下标#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
