模仿奈雪Banner组件-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_38982591/article/details/135953597

本文详细描述了如何在Vue项目中使用Swiper组件创建一个可自定义配置的轮播图，包括自动切换、定时器、指示点以及数据绑定等功能，展示了如何为组件传递列表数据并控制其状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

components

<template>
	<view class="wrap" :style="{height:wrapHeight}">
		<!--banner的背景 -->
		<view class="wrap__bgSwiper">
			<image class="wrap__bgSwiper__item" v-for="(item, index) in list" :src="item.floorImage"
				:style="{ opacity: index == currentInde ? 1 : 0,transition: 'opacity '+transitionDuration+'s'}"
				:key="index">
			</image>
		</view>
		<!-- 封面的banner -->
		<swiper class="wrap__swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
			:duration="duration" @change="change" :current="currentInde">
			<swiper-item v-for="(item,index) in list" :key="index" @click="confirm(item)">
				<image class="wrap__swiper__item" :src="item.image"></image>
			</swiper-item>
		</swiper>
	</view>
</template>


<script>
	export default {
		name: 'jerry-banner',
		props: {
			//是否显示面板指示点
			indicatorDots: {
				type: Boolean,
				default: false
			},
			//是否自动切换
			autoplay: {
				type: Boolean,
				default: false
			},
			//自动切换时间间隔	
			interval: {
				type: Number,
				default: 2000
			},
			//轮播图滑动动画时长
			duration: {
				type: Number,
				default: 500
			},
			//过渡效果的时长
			transitionDuration: {
				type: Number,
				default: 2
			},
			//当前所在滑块的 index
			current: {
				type: Number,
				default: 0
			},
			// 轮播图高度
			height: {
				type: [Number, String],
				default: 350
			},
			//轮播图数据
			list: {
				type: Array,
				default: []
			},
		},
		data() {
			return {
				currentInde: 0
			}
		},
		onLoad() {
			console.log();
		},
		watch: {
			current: {
				handler(val) {
					this.currentInde = val
				},
				deep: true,
				immediate: true
			}
		},
		computed: {
			wrapHeight() {
				const heightStr = String(this.height);
				if (heightStr.endsWith("px")) {
					return heightStr;
				} else {
					return heightStr + "px";
				}
			}
		},
		methods: {
			change(e) {
				this.$emit("change", e)
				this.currentInde = e.detail.current
				this.$forceUpdate()
			},
			confirm(item) {
				this.$emit('confirm', item)
			}
		}
	}
</script>

<style lang="scss">
	.wrap {
		width: 100%;
		image-rendering: -webkit-optimize-contrast;
		position: relative;

		&__swiper {
			height: 100%;
			width: 100%;

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

		&__bgSwiper {
			position: absolute;
			width: 100%;
			height: 100%;

			&__item {
				position: absolute;
				width: 100%;
				height: 100%; // 添加过渡属性，设置过渡时间为0.5秒
			}
		}
	}
</style>

使用：

<template>
	<view class="container">
		<view class="banner">
			<jerry-banner :list="bannerList"></jerry-banner>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bannerList: [{
						"image": "https://trade-marketing-prod-oss.pin-dao.cn/product/1704211685315.png",
						"fileType": 1,
						"floorImage": "https://trade-marketing-prod-oss.pin-dao.cn/product/1704211687589.png",
						"name": "阿胶奶茶",
						"route": "nayuki://pindao.cn/shopMenu/shopMenu?groupId=40335"
					}

					,
					{
						"image": "https://trade-marketing-prod-oss.pin-dao.cn/product/1703728667971.png",
						"fileType": 1,
						"floorImage": "https://trade-marketing-prod-oss.pin-dao.cn/product/1703728670590.png",
						"name": "年报",
						"route": "nayuki://pindao.cn/annualReport/index/index?ari=419&cnc=CESg8779aH7"
					}

					,
					{
						"image": "https://trade-marketing-prod-oss.pin-dao.cn/product/1703604583350.png",
						"fileType": 1,
						"floorImage": "https://trade-marketing-prod-oss.pin-dao.cn/product/1703604585521.png",
						"name": "霸气车厘子",
						"route": "nayuki://pindao.cn/shopMenu/shopMenu?groupId=40332"
					}

					,
					{
						"image": "https://trade-marketing-prod-oss.pin-dao.cn/product/1702998538046.png",
						"fileType": 1,
						"floorImage": "https://trade-marketing-prod-oss.pin-dao.cn/product/1702998539698.png",
						"name": "超厚芋泥",
						"route": "nayuki://pindao.cn/shopMenu/shopMenu?groupId=40328"
					}

					,
					{
						"image": "https://trade-marketing-prod-oss.pin-dao.cn/product/1702636984635.png",
						"fileType": 1,
						"floorImage": "https://trade-marketing-prod-oss.pin-dao.cn/product/1702636986446.png",
						"name": "八香主k",
						"route": "nayuki://pindao.cn/shopMenu/shopMenu?groupId=40307"
					}

					,
					{
						"image": "https://trade-marketing-prod-oss.pin-dao.cn/product/1694428645178.png",
						"fileType": 1,
						"floorImage": "https://trade-marketing-prod-oss.pin-dao.cn/product/1694428648907.png",
						"name": "周一免配日",
						"route": "nayuki://pindao.cn/shopMenu/shopMenu?cnc=CESr5QL3aY8"
					}

					,
					{
						"image": "https://trade-marketing-prod-oss.pin-dao.cn/product/1704357922534.png",
						"fileType": 1,
						"floorImage": "https://trade-marketing-prod-oss.pin-dao.cn/product/1704357927974.png",
						"name": "储值有礼",
						"route": "nayuki://pindao.cn/userCenter/memberRecharge?cnc=CESFIN4KaMP"
					}

					,
					{
						"image": "https://trade-marketing-prod-oss.pin-dao.cn/product/1704373238984.png",
						"fileType": 1,
						"floorImage": "https://trade-marketing-prod-oss.pin-dao.cn/product/1704373242613.png",
						"name": "全国社群入群礼",
						"route": "https://wxh5.icc.link/lbs/?id=1742846572695326722&unique=e2a185aa25c1183c#/?icc=1"
					}

				]
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
	.banner {
		position: relative;
		width: 100%;
		height: 600rpx;
	}
</style>

效果：