hs_control_app/components/banner-1/banner-1.vue

<template>
	<view style="">
		<view class="banner">
			<swiper class="swiper" :current="current" previous-margin="192rpx" next-margin="192rpx"
				@change="changeCurrent">
				<swiper-item v-for="(item, index) in list" :key="index" class="swiper-item"
					@click="downLoad(item.link)">
					<view class="banner-li" :class="{ 'active-item': current === index }">
						<image class="banner-li__img" :src="url+item.imgPath" mode="">
						</image>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'Banner1',
		props: {
			list: {
				type: Array,
				default: () => []
			},
			url: {
				type: String,
				default: null
			}
		},
		data() {
			return {
				current: 1, // 当前展示滑块下标
			}
		},
		watch: {

		},
		created() {

		},
		methods: {
			// 切换
			changeCurrent(event) {
				this.current = event.detail.current
			},
			// 打开自定义链接
			openCustomLink(link = '') {
				console.log(`link: ${link}`)
			},
			downLoad(item) {
				console.log(this.baseURL)
				if (item) {
					let url = encodeURIComponent(item)
					uni.navigateTo({
						url: '../../pages/home/myWebView?url=' + url
					})
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.banner {
		width: 100%;
		height: 226upx;
		background-color: #efefef;
		padding-top: 10px;

		.banner-li {
			width: 366upx;
			height: 206upx;
			border-radius: 8upx;
			overflow: hidden;
			transform: scaleY(0.85);
			transition: all .5s;

			&__img {
				width: 100%;
				height: 100%;
			}
		}

		.swiper-item {
			width: 366upx;
			height: 206upx;
			padding: 0 10upx;
		}

		.active-item {
			transform: scaleY(1);
		}
	}
</style>