uniapp 新建页面和页面配置

小灰灰 2021-07-24 23:28 797阅读 0赞

1、在pages目录中新建.vue文件
    2、在pages.json中->pages数组内
    	{
    		"path":"不加后缀的文件路径",
    		"style":{页面样式配置}
    		
    	},
    	{...， 
    		“style”:{"h5":  特定平台样式
    					{
    						"pullToRefresh":
    						 	{
    							"color":"#007AFF",
    							"offset":"20%"
    				   			}
    				   }
    				}
    	}
    	
    3、数组中的第一项就是加载的首页

[样式配置文档见style][style]

代码示例:

{ 
    	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
    		
    		{ 
    			"path": "pages/message/message",
    			"style": { 
    				"navigationBarTitleText": "study1",
    				"backgroundColor":"#4CD964",
    				"h5":{ 
    					"pullToRefresh":{ 
    						"color":"#007AFF",
    						"offset":"20%"
    					}
    				}
    			}
    		},
    		
    		{ 
    			"path": "pages/index/index",
    			"style": { 
    				"navigationBarTitleText": "uni-app"
    			}
    		}
    	],
    	"globalStyle": { 
    		"navigationBarTextStyle": "black",
    		"navigationBarTitleText": "uni-appaa",
    		"navigationBarBackgroundColor": "#008000",
    		"backgroundColor": "#008000",
    		"enablePullDownRefresh":true,
    		"backgroundTextStyle":"light",
    		"onReachBottomDistance":100
    	}
    }

[style]: https://uniapp.dcloud.io/collocation/pages?id=style

发表评论取消回复

表情：

评论列表（有 0 条评论，797人围观）

还没有评论，来说两句吧...

相关阅读

相关 uniapp使用命令创建页面

package.js下创建命令 "scripts": { "add": "node ./auto/addPage.ts" } package

╰半夏微凉°/ 2023年10月14日 16:12/ 0 赞/ 13 阅读

相关 uniapp页面传值

一、传递单个或者多个参数商品列表页： // 商品列表页传递id 跳转到相应的商品详情页面 getGoodsDetails(id){ uni

﹏ヽ暗。殇╰゛Y/ 2022年11月17日 13:56/ 0 赞/ 241 阅读

相关 uniapp 去浏览器页面

[browser.js][] import browser from '@/lib/browser.js' //去浏览器页面 goPage() {

小咪咪/ 2022年08月29日 04:26/ 0 赞/ 178 阅读

相关 Ionic新建页面及页面跳转

最近在进行Ionic项目的学习，接下来稍稍总结一下新建页面以及页面跳转的内容。一、创建页面：使用命令：ionic g page Ranking 该命令执行完之后，pa

深藏阁楼爱情的钟/ 2022年05月24日 04:44/ 0 赞/ 352 阅读

相关 eclipse新建jsp页面出错

eclipse新建一个jsp页面出错如下图: ![这里写图片描述][70] 解决方法: 1.右键项目->Build Path->Configure Buil

Love The Way You Lie/ 2022年05月23日 08:43/ 0 赞/ 235 阅读

相关 uniapp页面参数传递

uniapp页面参数传递简介uniapp传递参数，和获取参数。首先链接传递或者事件传递 1、要传递参数的页面 <table> <tbody

╰半橙微兮°/ 2022年04月25日 07:02/ 0 赞/ 901 阅读

相关 uniapp页面参数传递

uniapp页面参数传递 ![4a9631149e30a9b4cbc600f5a5e3200e.jpg][]admin2019-04-09 【[Uni-App][]】 1

左手的ㄟ右手/ 2022年01月27日 20:38/ 0 赞/ 645 阅读

相关 uniapp之tabBar/页面切换

1.uniapp目录结构 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6L

╰半夏微凉°/ 2021年09月13日 15:24/ 0 赞/ 5362 阅读

相关 uniapp—— 创建新页面和页面的配置

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

雨点打透心脏的1/2处/ 2021年07月25日 11:11/ 0 赞/ 514 阅读

相关 uniapp 新建页面和页面配置

1、在pages目录中新建.vue文件 2、在pages.json中->pages数组内 { "path":"不加后缀的文件路径",

小灰灰/ 2021年07月24日 23:28/ 0 赞/ 798 阅读