是引导页（guide） 不是 启动界面 （splash）详细设置步骤见：uniapp设置引导页
https://www.uniapp.club/thread-13.htm
第一步：把pages.json设置如下
{ "pages" : [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages { "path" : "pages/index/index", "style" : { "app-plus" : { "titleNView" : false //禁用原生导航栏 } } }, { "path" : "pages/main/main", "style" : { "navigationBarTitleText" : "uni-app引导页实例" } } ], "globalStyle" : { "navigationBarTextStyle" : "black", "navigationBarTitleText" : "", "navigationBarBackgroundColor" : "#F8F8F8", "backgroundColor" : "#F8F8F8" }}
第二步：设置index.vue页面格式
<template> <view class="content"> <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class="swiper" :style="{'height':windowHeight}" @animationfinish="animationfinish"> <swiper-item> <view class="swiper-item" :style="{'height':windowHeight,'background-color':'red'}">A</view> </swiper-item> <swiper-item> <view class="swiper-item" :style="{'height':windowHeight,'background-color':'green'}">B</view> </swiper-item> <swiper-item> <view class="swiper-item" :style="{'height':windowHeight,'background-color':'pink'}">C</view> </swiper-item> <swiper-item> <view class="swiper-item" :style="{'height':windowHeight,'background-color':'yellow'}">进入首页</view> </swiper-item> </swiper> <text :style="{color:'red','font-weight':200}">这是一个sssH1</text> </view></template><script> export default { data() { return { windowHeight: '603px' //定义手机屏幕高度值变量 } }, onLoad() { var _me = this; uni.getSystemInfo({//获取手机屏幕高度信息，让swiper的高度和手机屏幕一样高 success: function(res) { console.log(res.model); console.log(res.pixelRatio); console.log(res.windowWidth); console.log(res.windowHeight);//这里是手机屏幕高度 console.log(res.language); console.log(res.version); console.log(res.platform); _me.windowHeight = res.windowHeight + 'px'; console.log('手机屏幕高度为' + _me.windowHeight); } }); }, methods: { animationfinish(e) { console.log(JSON.stringify(e.detail.current)); //判断到最后一张后，自动转向进入首页 if (e.detail.current == 3) { console.log('动画已经播放结束'); setTimeout(function() { uni.redirectTo({ url: '/pages/main/main' }); }, 1000) } } } }</script><style> .swiper { width: 100%; /* height: 100vw; */ /* background: red; */ }</style>
