uniapp开发小程序-swiper点击预览大图（商品详情页轮播图）

1.实现效果：

2.具体代码：

<view class="swiper_box"><!--轮播图--><swiper class="ms_swiper" :autoplay="true" circular="true" @change="swiperChange"><swiper-item v-for="(item,index) in banner" :key="index"><view class="swipers"><image class="swiper-item" @tap="previewImage(index)" :src="item" mode="widthFix"></image></view></swiper-item></swiper><!--数字指示点--><view slot="indicator" class="indicator-num"><text class="indicator-num__text">{{ swiperCurrent }}/{{ banner.length }}</text></view>
</view><script>export default {data() {return {swiperCurrent: 1,banner: [],}},methods: {//轮播图指示点swiperChange(e) {// console.log('当前图片的下标',e.detail.current + 1)this.swiperCurrent = e.detail.current + 1},//预览轮播图previewImage(index) {uni.previewImage({current: index, //预览图片的下标urls: this.banner //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以})},}}
</script><style>.swiper_box {width: 100%;height: 750rpx;position: relative;}.ms_swiper,.ms_swiper swiper-item,.swipers,.swipers image {width: 100%;height: 750rpx !important;}.indicator-num {background-color: rgba(0, 0, 0, 0.35);border-radius: 20rpx;width: 96rpx;height: 39rpx;display: flex;align-items: center;justify-content: center;position: absolute;right: 20rpx;bottom: 30rpx;}.indicator-num__text {font-size: 30rpx;font-family: PingFang SC;font-weight: 500;color: #FFFFFF;}
</style>