首页uniapp移动端开发启动页投放位置得完整代码

uniapp移动端开发启动页投放位置得完整代码

时间: 2023-08-02 16:42:49 浏览: 94

以下是Uniapp移动端开发启动页投放位置的完整代码：在`App.vue`中添加以下代码： ```html <template> <div>  <div class="launch-page" v-if="showLaunch">  </div>  <div class="app-content" v-else>  </div> </div> </template> <script> export default { data() { return { showLaunch: true, // 是否显示启动页 launchTime: 3000 // 启动页显示时间 }; }, created() { // 模拟启动页显示时间 setTimeout(() => { this.showLaunch = false; }, this.launchTime); } }; </script> <style> /*启动页样式*/ .launch-page { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; z-index: 9999; /*启动页背景图片*/ background-image: url(./static/launch.png); background-repeat: no-repeat; background-size: cover; background-position: center; } /*主体内容样式*/ .app-content { /*主体内容样式*/ } </style> ``` 在`manifest.json`中添加以下代码： ```json { "appLaunchPath": "/pages/index/index", // 首页路径 "splashscreen": { "image": "/static/launch.png", // 启动页图片 "backgroundColor": "#ffffff", // 启动页背景色 "textColor": "#000000", // 启动页文字颜色 "text": "Loading..." // 启动页文字 } } ``` 在`index.html`中添加以下代码： ```html  <style> html, body { margin: 0; padding: 0; height: 100%; } </style>  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />  <body style="background-color: #ffffff;"></body> ``` 在`static`文件夹下添加启动页图片`launch.png`。

阅读全文