zoukankan      html  css  js  c++  java
  • uni-app 头部及底部导航

    简单记录,方便复制,详见官方文档

    <!-- 底部导航 -->
    <!-- 手机上底部导航的边框颜色可用十六进制设置(电脑不生效) -->
    	"tabBar":{
    		"color": "#313131",
    		"selectedColor": "#0A8EFF",
    		"backgroundColor": "#ffffff",
    		"fontSize": "12px",
    		"borderStyle":"black",
    		"iconWidth":"22px",
    		"spacing":"6px",
    		"list": [{
    					"pagePath": "pages/index/index",
    					"iconPath": "static/tabBar/index.png",
    					"selectedIconPath": "static/tabBar/index_select.png",
    					"text": "首页"
    				}
    				,{
    					"pagePath": "pages/zhong/zhong",
    					"iconPath": "static/tabBar/chuli.png",
    					"selectedIconPath": "static/tabBar/chuli_select.png",
    					"text": "中间"
    				}
    				,{
    					"pagePath": "pages/you/you",
    					"iconPath": "static/tabBar/chuli.png",
    					"selectedIconPath": "static/tabBar/chuli_select.png",
    					"text": "右边"
    				}
    			]
    	}
    

      头部设置

    <!-- 一般常用 -->
    			"style": {
    				"navigationBarTitleText": "首页",
    				"navigationBarBackgroundColor":"#ffffff",
    				"navigationBarTextStyle":"black",
    				"app-plus":{
    					"titleNView":{
    						"titleSize":"40upx"
    					}
    				}
    			}
    

      

    <!-- 头部禁用 -->
    			"style": {
    				"navigationBarTitleText": "首页",
    				"navigationStyle": "custom" 
    			}
    

      

    <!-- 标题文字设置及右边按钮 -->
    			"style": {
    				"navigationBarTitleText": "中页",
    				"app-plus":{
    					"titleNView":{
    						"titleSize":"40upx",
    						"buttons":[
    						  {
    							"text":"哈哈",
    							"fontSize":"30upx",
    							"width":"120upx",
    							"colorPressed":"red"
    						  }
    						]
    					}
    				}
    			}
    

      

    <!-- 右边儿分享图标(各类图标) -->
    			"style": {
    				"navigationBarTitleText": "二级页",
    				"app-plus":{
    					"titleNView":{
    						"titleSize":"40upx",
    						"buttons": [
    							{
    								"type": "share"
    							}
    						]
    					}
    					
    				}
    			}
    

      

    <!-- 按钮事件 -->
    		onNavigationBarButtonTap: function(btn) {
    			console.log("按钮的事件")
    		},
    

      

  • 相关阅读:
    $P5240 Derivation$
    $P2504 [HAOI2006]聪明的猴子$
    $P1194 买礼物$
    $P2690 接苹果$
    $CF1141C Polycarp Restores Permutation$
    $CF1141B Maximal Continuous Rest$
    $CF1141A Game 23$
    $P1215 [USACO1.4]母亲的牛奶 Mother's Milk$
    $luogu2375[NOI2014]$
    poj 1419 (最大独立集)
  • 原文地址:https://www.cnblogs.com/xiaoyaolang/p/13968907.html
Copyright © 2011-2022 走看看