유 니 앱 안내 페이지

4.567917.배경 그림 을 사용 하여 그림 을 자동 으로 채 우 는 것 은 서로 다른 화면 에 맞 추기 위해 서 입 니 다.
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>