uniapp引导页

• 使用背景图自动填充图片，是为了适配不同的屏幕

pages.json第一项

		{
			"path": "pages/guide/guide", //引导页
			"style": {
				"navigationStyle": "custom" //自定义头部
			}
		},

引导页面

<template>
	<view class='vh100 w100' v-if="!hasGuide">
		<swiper class="swiper w100 h100" :indicator-dots="true" :autoplay="false" indicator-active-color="#fff" indicator-color="#eee">
			<swiper-item class="item1 w100 h100">
			</swiper-item>
			<swiper-item class="item2 w100 h100">
			</swiper-item>
			<swiper-item class="relative item3 w100 h100">
				<view class="absolute center btn" @click="toHome">立即体验</view>
			</swiper-item>
		</swiper>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				hasGuide:1
			}
		},
		created() {
			this.hasGuide = uni.getStorageSync('hasGuide')
			console.log(this.hasGuide)
			if(uni.getStorageSync('hasGuide')){
				uni.switchTab({
					url:'/pages/tabBar/Home/home'
				})
			}
		},
		methods: {
			toHome(){
				uni.setStorageSync('hasGuide',1)
				uni.switchTab({
					url:'/pages/tabBar/Home/home'
				})
			}
		},
	}
</script>

<style scoped lang='scss'>
	.item1{
		background: #ffc600 url(../../static/img/guide-1.png) no-repeat top left;
		background-size: contain;
	}
	.item2{
		background: #ffc600 url(../../static/img/guide-2.png) no-repeat top left;
		background-size: contain;
	}
	.item3{
		background: #ffc600 url(../../static/img/guide-3.png) no-repeat top left;
		background-size: contain;
		.btn{
			bottom: 80rpx;
			left: 50%;
			transform: translateX(-50%);
			border: 1rpx solid #333;
			border-radius: 44rpx;
			width: 250rpx;
			height: 80rpx;
		}
	}
	
</style>