travel-applet/components/swiper/index.vue

<template>
	<swiper class="swiper" @change="viewChange" :autoplay="true" circular :indicator-dots="true"
		indicator-color="#F5F5F5" indicator-active-color="#ffffff" v-if="imgsList.length"
		:style="[{ height: swiperHeight + 'px' }]">
		<swiper-item v-for="item in imgsList" :key="item.id">
			<view class="swiper-item uni-bg-red">
				<image :src="item.url" mode="widthFix" class="img" @load="loadImg"></image>
			</view>
		</swiper-item>
	</swiper>
</template>

<script>
	export default {
		name: 'swiperImg',
		props: {
			imgsList: Array,
		},
		data() {
			return {
				swiperHeight: 0,
				current: 0,
			};
		},
		methods: {
			loadImg() {
				this.getCurrentSwiperHeight('.img');
			},
			// 轮播切换
			viewChange(e) {
				this.current = e.target.current;
				this.getCurrentSwiperHeight('.img');
			},
			// 动态获取内容高度
			getCurrentSwiperHeight(element) {
				let query = uni.createSelectorQuery().in(this);
				query.selectAll(element).boundingClientRect();
				query.exec((res) => {
					// 切换到其他页面swiper的change事件仍会触发，这时获取的高度会是0，会导致回到使用swiper组件的页面不显示了
					if (this.imgsList.length && res[0][this.current].height) {
						this.swiperHeight = res[0][this.current].height;
					}
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.swiper {
		padding: 20rpx;
		border-radius: 4px;

		.swiper-item {
			width: 100%;

			image {
				width: 100%;
			}
		}
	}
</style>