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>