其他分享
首页 > 其他分享> > 关于 uni 中的一些问题

关于 uni 中的一些问题

作者:互联网

1.首先是引导页

<template>
	<view class="guide">
		<swiper class="swiper" :indicator-dots="true"  interval="4000" duration="500">
		    <swiper-item >
				<view class="item-logo" style="background-color: #D74B28">
					<view class="guide-item-logo">Uni</view>
					<view class="animate guide-show">
						<view class="h2 animated bounceInDown">小巧高能</view>
						<view class="h3 animated bounceInLeft">几十K的JS和CSS</view>
						<view class="h4 animated bounceInRight">上百种控件样式和模板</view>
					</view>
				</view>
			</swiper-item>
			
			<swiper-item >
				<view class="item-logo" style="background-color: #FCD208;">
					<view class="guide-item-logo">Uni</view>
					<view class="button-sp-area animate guide-show ">
						<button  plain="true" @tap="goIndex"   id="close" class="mui-btn mui-btn-warning mui-btn-outlined">立即体验</button>
					</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		onLoad() {
			// #ifdef APP-PLUS
			if(plus.storage.getItem("lauchFlag") == "true"){
				uni.switchTab({
					url:"../index/index"
				})
			}
			// #endif
			// #ifdef H5
			if(uni.getStorageSync("lauchFlag") == "true"){
				uni.switchTab({
					url:"../index/index"
				})
			}
			// #endif
		},
		methods: {
			goIndex(){
				// #ifdef APP-PLUS
				plus.storage.setItem("lauchFlag", "true");
				// #endif
				// #ifdef H5
				uni.setStorageSync("lauchFlag","true")
				console.log(uni.getStorageSync("lauchFlag"));
				// #endif
				uni.switchTab({
					url:"../index/index"
				})
			}
		}
	}
</script>

<style>
	#close {position: absolute;width: 160px;left: 50%;margin-left: -80px;bottom: 15%;padding: 10px;color: #fff;border-color: #fff;}
	.item-logo {width: 100%;height: 100%;position: relative;}
	.item-logo .guide-item-logo {width: 200px;height: 200px;display: block;border: 1px solid #FFFFFF;border-color: rgba(255, 255, 255, 0.5);text-align: center;line-height: 200px;border-radius: 50%;font-size: 40px;color: #fff;position: absolute;top: 15%;left: 50%;margin-left: -100px;}
	.animate {position: absolute;left: 0;bottom: 15%;width: 100%;color: #fff;display: -moz-box;}
	.animate .h2 {text-align: center;margin-bottom: 20px;}
	.animate .h3,.animate .h4 {width: 50%;height: 30px;line-height: 30px;list-style: none;font-size: 16px;text-align: right;}
	.animate .h4 {text-align: left;float: right;}
	.animated {-webkit-animation-duration: 1s;-webkit-animation-play-state: paused;-webkit-animation-fill-mode: both;}
	.guide-show .bounceInDown {-webkit-animation-name: bounceInDown;-webkit-animation-play-state: running;-webkit-animation-delay: 1s;display: block;}
	.guide-show .bounceInLeft {-webkit-animation-name: bounceInLeft;display: block;-webkit-animation-play-state: running;}
	.guide-show .bounceInRight {-webkit-animation-name: bounceInRight;display: block;-webkit-animation-play-state: running;-webkit-animation-delay: 0.5s;}
	.guide{width: 100%;height: 100%;overflow: hidden;position: absolute;color: #fff;border-color: #fff;}
	.item-logo{height:100vh}
	.swiper{height: 100vh;}
	@-webkit-keyframes bounceInDown {
		0%, 60%, 75%, 90%, 100% {
			-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
			animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
		}
		0% {
			opacity: 0;
			-webkit-transform: translate3d(0, -3000px, 0);
			transform: translate3d(0, -3000px, 0);
		}
		60% {
			opacity: 1;
			-webkit-transform: translate3d(0, 25px, 0);
			transform: translate3d(0, 25px, 0);
		}
		75% {
			-webkit-transform: translate3d(0, -5px, 0);
			transform: translate3d(0, -5px, 0);
		}
		90% {
			-webkit-transform: translate3d(0, 3px, 0);
			transform: translate3d(0, 3px, 0);
		}
		100% {
			-webkit-transform: none;
			transform: none;
		}
	}
	@-webkit-keyframes bounceInLeft {
		0%, 60%, 75%, 90%, 100% {
			-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
			animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
		}
		0% {
			opacity: 0;
			-webkit-transform: translate3d(-3000px, 0, 0);
			transform: translate3d(-3000px, 0, 0);
		}
		60% {
			opacity: 1;
			-webkit-transform: translate3d(25px, 0, 0);
			transform: translate3d(25px, 0, 0);
		}
		75% {
			-webkit-transform: translate3d(-10px, 0, 0);
			transform: translate3d(-10px, 0, 0);
		}
		90% {
			-webkit-transform: translate3d(5px, 0, 0);
			transform: translate3d(5px, 0, 0);
		}
		100% {
			-webkit-transform: none;
			transform: none;
		}
	}
	@-webkit-keyframes bounceInRight {
		0%, 60%, 75%, 90%, 100% {
			-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
			animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
		}
		0% {
			opacity: 0;
			-webkit-transform: translate3d(3000px, 0, 0);
			transform: translate3d(3000px, 0, 0);
		}
		60% {
			opacity: 1;
			-webkit-transform: translate3d(-25px, 0, 0);
			transform: translate3d(-25px, 0, 0);
		}
		75% {
			-webkit-transform: translate3d(10px, 0, 0);
			transform: translate3d(10px, 0, 0);
		}
		90% {
			-webkit-transform: translate3d(-5px, 0, 0);
			transform: translate3d(-5px, 0, 0);
		}
		100% {
			-webkit-transform: none;
			transform: none;
		}
	}
</style>

  以上是引导页内容。

2.其次是数据缓存

//   存储数据
// #ifdef APP-PLUS
plus.storage.setItem("lauchFlag", "true");
// #endif
// #ifdef H5
uni.setStorageSync("lauchFlag","true")
// #endif
//  读取数据
// #ifdef APP-PLUS
plus.storage.getItem("lauchFlag") 
// #endif
// #ifdef H5
uni.getStorageSync("lauchFlag")

3.关于跳转不能跳到与tabBar相同的url

//需要使用uni.switchTab
uni.switchTab({
    url:""
})    

4.关于uni左上角不出现返回按钮 

//需要使用 uni.reLaunch 跳转到不出现返回按钮的页面
uni.reLaunch({
    url: '../login/login'
});

  

  

 

标签:translate3d,100%,transform,animation,关于,一些,webkit,uni
来源: https://www.cnblogs.com/cateatfish/p/10539105.html