uniapp首次启动欢迎引导页实现思路

原创

菜菜有点菜

发布于 2024-05-04 16:42:22

1070

发布于 2024-05-04 16:42:22

虽然官方提供了引导页插件但是如何自己实现一个引导页功能呢？？？

~~我特么要自己比赛现成离线手撸，，，所以要自己来实现》？》》~~

实现原理

使用css绝对定位设置父级宽高，然后子级图片百分百，这样就可以把整个swiper撑开了

<template>
	<view>
		<swiper class="a" indicator-dots="ture">
			<swiper-item>
				<image src="../../static/111.jpeg"></image>
			</swiper-item>
			<swiper-item>
				<image src="../../static/welBg.png"></image>
			</swiper-item>
			<swiper-item>
				<image src="../../static/111.jpeg"></image>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>
<style>
	.a {
		position: absolute;
		width: 750rpx;
		height: 1536rpx;
	}

	image {
		height: 100%;
		width: 100%;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}
</style>

实现效果图：