uni-app 启动页，引导页，广告页

1 勾选自定义启动图这个需要打包才能生效

2 引导页，广告页

1 plus.navigator.closeSplashscreen();//为关闭启动页，需要设置启动页为不自动关闭

2 请求接口后再调用plus.navigator.closeSplashscreen() 防止出现白屏的情况

3 通过 uni.setStorageSync(‘launchFlag’, true) 来判断是引导页还是广告页

<template><view><view class="swiper-css zqui-rel" :style="{ height: hpx }"><swiper class="swiper" :style="{ height: hpx }" :indicator-dots="indicatorDots" :autoplay="autoplay":interval="interval" :duration="duration" @change="guideAction"><!-- next-margin="50rpx" --><swiper-item class="flex1" v-for="(item, index) in imageList" :key="index" @click="gotoLink(item)"><image class="image-size" mode="aspectFit"  :src="item.image" /></swiper-item></swiper><!-- 按钮样式切换 --><template v-if="cur != imageList.length-1"><view class=" flex-column dots"><block v-for="(item,index) in imageList" :key="index"><view class="dot" :class="{'active':  index == cur}"></view></block></view></template><!-- 第三张图使用按钮《立即进入》 --><template v-if="cur ==imageList.length-1&&type==1"><button class="flex-column cu-btn footer" @click="launchApp">立即体验</button></template><!-- 右上角跳过按钮 --><view class="btn-box" @click="launchApp" v-if="imageList.length"><text class="passbtn">跳过</text></view></view></view>
</template><script>import api from '@/utils/api';// const animation = weex.requireModule('animation');const animation = uni.requireNativePlugin('animation');export default {data() {return {//修改图片,文字描述imageList: [],indicatorDots: false,autoplay: false,interval: 10000,duration: 500,iStatusBarHeight: '0px',hpx: '100vh',cur: 0,dotsStyles: '',showGuid: "",token: "",type: 1};},onLoad() {let that = this;uni.getSystemInfo({success: function(res) {that.hpx = res.windowHeight + 'px';}});/*** 应道业* **/let launchFlag = uni.getStorageSync('launchFlag');this.token = uni.getStorageSync('access_token');console.log(launchFlag)if (launchFlag) {this.type = 2;this.geticonType(2)} else {this.type = 1;this.geticonType(1)}},onReady() {this.move(0, 1);},methods: {gotoLink(item) {if (item.link) {uni.setStorageSync('guideLink', item.link)uni.navigateTo({url: "/pages/guide/guideLink/guideLink"})}},geticonType(type) {console.log(type, 'type')api.getadvertByType({type: type}).then(res => {console.log(res, '引导页数据')if (res.code == 0) {this.imageList = res.data;if (this.imageList.length == 0) {this.launchApp()return }setTimeout(()=>{plus.navigator.closeSplashscreen();},1000)if(type==2){setTimeout(()=>{this.launchApp()},4000)}}})},launchApp() {//跳过引导页,储存本地值,下次进入直接跳过// 判断是否存在tokenuni.setStorageSync('launchFlag', true)if (!this.token) {uni.reLaunch({url: '/pages/login/login'});} else {uni.switchTab({url: '/pages/index/index'})}},guideAction(event) {let that = this,index = event.detail.current;that.cur = index;if (index == 0) {that.move(0, 1);that.moveTwo(150, 0.1);that.moveThree(150, 0.1);that.lefMainAction(0);}if (index == 1) {that.moveTwo(0, 1);that.move(150, 0.1);that.moveThree(150, 0.1);that.lefMainAction(uni.upx2px(80) + 'px');}if (index == 2) {that.moveThree(0, 1);that.moveTwo(150, 0.1);that.move(150, 0.1);that.lefMainAction(uni.upx2px(160) + 'px');}},lefMainAction(mum) {var testLM = this.$refs.lefMain;animation.transition(testLM, {styles: {transform: 'translate(' + mum + ',0px)'},duration: 400, //mstimingFunction: 'ease',delay: 0 //ms},function() {});},move(tran, opa) {var testEl = this.$refs.box1;animation.transition(testEl, {styles: {transform: 'translate(' + tran + 'px,0px)',transformOrigin: 'center center',opacity: opa},duration: 800, //mstimingFunction: 'ease',delay: 0 //ms},function() {});var textE2 = this.$refs.box2;animation.transition(textE2, {styles: {transform: 'translate(0px,' + tran + 'px) scale(' + opa + ')',transformOrigin: 'center center',opacity: opa},duration: 800, //mstimingFunction: 'ease',delay: 0 //ms},function() {});},moveTwo(tran, opa) {var testEl = this.$refs.box3;animation.transition(testEl, {styles: {transform: 'translate(' + tran + 'px,0px)',transformOrigin: 'center center',opacity: opa},duration: 800, //mstimingFunction: 'ease',delay: 0 //ms},function() {});var textE2 = this.$refs.box4;animation.transition(textE2, {styles: {transform: 'translate(0px,' + tran + 'px) scale(' + opa + ')',transformOrigin: 'center center',opacity: opa},duration: 800, //mstimingFunction: 'ease',delay: 0 //ms},function() {});},moveThree(tran, opa) {var testEl = this.$refs.box5;animation.transition(testEl, {styles: {transform: 'translate(' + tran + 'px,0px)',transformOrigin: 'center center',opacity: opa},duration: 800, //mstimingFunction: 'ease',delay: 0 //ms},function() {});var textE2 = this.$refs.box6;animation.transition(textE2, {styles: {transform: 'translate(0px,' + tran + 'px) scale(' + opa + ')',transformOrigin: 'center center',opacity: opa},duration: 800, //mstimingFunction: 'ease',delay: 0 //ms},function() {});}}};
</script><style lang="scss">page {background-color: #FFFFFF;min-height: 100vh;height: 100vh;}.swiper-css{background-color: #FFFFFF;}.guide {flex-direction: column;flex: 1;}.flex1 {flex: 1;width: 750rpx;height: 100vh;}.image-size {width: 750rpx;height: 100vh;// margin-left: 60rpx;}.title-box {padding: 250rpx 0 120rpx 64rpx;}.guide-title {font-size: 48rpx;font-weight: bold;color: rgba(58, 61, 68, 1);}.guide-subtitle {// margin-top: 2000rpx;font-size: 35rpx;color: rgba(131, 136, 146, 1);line-height: 50rpx;}.footer {width: 231rpx;height: 80rpx;text-align: center;position: fixed;bottom: 116rpx;left: 37%;font-size: 30rpx;color: #FFFFFF;background-color: #009fe8;}.btn-box {position: absolute;z-index: 999;right: 40rpx;top: 120rpx;}.dots {display: flex;justify-content: center;position: absolute;z-index: 999;height: 151rpx;left: 0;right: 0;bottom: 20rpx;}.passbtn {color: #838892;text-align: center;border-width: 1rpx;border-color: rgba(0, 0, 0, 0.5);border-style: solid;border-radius: 30rpx;font-size: 28rpx;padding-top: 10rpx;padding-bottom: 10rpx;padding-left: 25rpx;padding-right: 25rpx;}.dot {margin: 0 4rpx;width: 15rpx;height: 15rpx;background: #CDD2DD;border-radius: 8rpx;transition: all .6s;}.dot.active {width: 40rpx;background: #009fe8 !important;}/* 相对定位 */.zqui-rel {position: relative;}.swiper-css {width: 750rpx;// height: 100vh;}.swiper-item {width: 750rpx;}
</style>

uni-app 启动页，引导页，广告页相关推荐

Flutter实战01 - 启动页闪屏广告引导页
一个app通常都会有一个App通常都会有SplashPage页面,在这页面包含启动页.引导页(app简介说明).闪屏广告页(点广告页跳转到相应H5页面). 在Flutter实现引导页需要在Materi ...
iOS-APP启动页加载广告
概述加载广告页, 展现跳过按钮实现倒计时功能, 并判断广告页面是否更新. 详细代码下载:http://www.demodashi.com/demo/10698.html 目前市场上很多APP(如淘 ...
app启动页面html,50个国内中文APP启动页设计
50个国内中文APP启动页设计 10月 17, 2016 评论 Sponsor 手机里的应用越来越多了,哼?每次翻页的时候都觉得自己已经被各种"精神绑架"了,然而,为什么好像每一个 ...
关于app的logo广告页的制作
今天来介绍下一个app的第一个页面广告页,广告页是app的第一个页面.lOGO页面的跳转分为三类,1.点击跳转2.定时跳转3.动画播放完毕自动跳转,下面都进行介绍一遍. 1.首先是点击跳转:还是先把布 ...
如何做到像百度云或者网易公开课一样动态更换APP启动图
http://www.code4app.com/forum.php?mod=viewthread&tid=7632&extra=page%3D2%26filter%3Dsortid%2 ...
html app启动页制作,【示例】App引导页的制作
注意:本文为5+App的引导页制作方法,uni-app另行制作,推荐使用nvue制作,也可以参考插件市场已经封装的插件https://ext.dcloud.net.cn/plugin?id=192 启 ...
app启动广告页的实现，解决了广告图片要实时更新的问题
网上很多的实现方法很多都是显示第一次的缓存的图片,这样就造成后台更新广告图片App不能实时展示的问题. 我的具体实现思路是: 1.启动时先获取启动页的图片全屏展示. 2.设计一个等待时间,如果超过等待 ...
android启动页广告图,一张图搞定APP启动页广告
之前我们产品里的启动页比较简单,就是背景色加上我们的logo.slogan等,这种形式适配起来比较容易,把元素切出来交给开发写出来就行.最近由于运营的需求,我们需要在APP启动页展示广告,广告图更新频 ...
APP设计之启动页和广告页
注:以下内容是我自己看了一些文章以及结合个人理解写的东西,可能有一些来自新人的偏见,欢迎交流. 一.什么是启动页苹果官方对于iOS启动页的设计说明:为了增强应用程序启动时的用户体验,您应该提供一个启 ...

uni-app 启动页，引导页，广告页

1 勾选自定义启动图这个需要打包才能生效

2 引导页，广告页

1 plus.navigator.closeSplashscreen();//为关闭启动页，需要设置启动页为不自动关闭

2 请求接口后再调用plus.navigator.closeSplashscreen() 防止出现白屏的情况

3 通过 uni.setStorageSync(‘launchFlag’, true) 来判断是引导页还是广告页

uni-app 启动页，引导页，广告页相关推荐

最新文章

热门文章

uni-app 启动页，引导页，广告页

1 勾选自定义启动图 这个需要打包才能生效

2 引导页，广告页

1 plus.navigator.closeSplashscreen();//为关闭启动页，需要设置启动页为不自动关闭

2 请求接口后再调用plus.navigator.closeSplashscreen() 防止出现白屏的情况

3 通过 uni.setStorageSync(‘launchFlag’, true) 来判断是引导页还是广告页

uni-app 启动页，引导页，广告页相关推荐

最新文章

热门文章

1 勾选自定义启动图这个需要打包才能生效