关于 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