xmhjc-applet/pages/index/base/showPictures.vue

<template>
	<view>
		<view class="title">
			<view class="title_text">鲍鱼展览</view>
		</view>
		<view class="swiperstyle">
			<u-swiper style="width:702rpx" :effect3d="true" height="351rpx" :list="swiperlist" indicatorMode="line"
				circular indicator keyName="url" @click="clicktabs"></u-swiper>
		</view>

		<viewer :images="swiperlist" v-if="isPreviewVisible" @close="isPreviewVisible = false"></viewer>
	</view>
</template>

<script>
	import {
		carouselList
	} from '@/http/api/common.js'

	export default {
		data() {
			return {
				swiperlist: [],
				isPreviewVisible: false
			}
		},
		async mounted() {
			this.getCarouselList()
		},
		methods: {
			async getCarouselList() {
				//获取轮播图
				let res = await carouselList({
					modules: '3'
				})
				if (res.data.code == 200) {
					let data = res.data.data.rows
					this.swiperlist = data.map(v => {
						return {
							...v,
							url: v.carouselUrlList[0].fileUrl
						}
					})
				}
			},

			clicktabs(item) {
				console.log(this.swiperlist[item].url)
				uni.previewImage({
					loop: true,
					urls: [this.swiperlist[item].url]
				})
			}
		}
	}
</script>

<style>
	.title {
		display: flex;
		width: 90vw;
		justify-content: space-between;
		margin: 0 auto;
	}

	.title_text {
		width: 128rpx;
		height: 45rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		line-height: 45rpx;
	}

	.swiperstyle {
		width: 702rpx;
		height: 351rpx;
		box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
		border-radius: 16rpx;
		margin-top: 20rpx;
	}
</style>