uniapp子页面被tabbar盖住

562 阅读1分钟

首先出现的问题是这个样子的

在这里插入图片描述

刚开始的时候在json文件中配置了底部tabbar的颜色

"tabBar": {
		"color": "#fff",
		"selectedColor": "#7BB4FF",
		"borderStyle": "black",
		"backgroundColor": "#7BB4FF",
		"list": [
			{
		        "pagePath": "pages/index/index",
		        "iconPath": "static/tab-home-icon.png",
		        "selectedIconPath": "static/selected-index.png",
		        "text": "首页"
		    },
			{
			    "pagePath": "pages/stationDetail/stationDetail",
			    "iconPath": "static/tab-station-icon.png",
			    "selectedIconPath": "static/selected-station.png",
			    "text": "电站"
			},
			{
			    "pagePath": "pages/shop/shop",
			    "iconPath": "static/shop-tabbar.png",
			    "selectedIconPath": "static/shop-tabbar-un.png",
			    "text": "商城"
			},
			{
			    "pagePath": "pages/my/my",
			    "iconPath": "static/tab-my.png",
			    "selectedIconPath": "static/tab-my-icon.png",
			    "text": "我的"
			}
		]
	},

根据文档上说的,在ios中可设置高斯模糊来进行覆盖
首先在manifest.json中找到app-plus的配置项,新增safearea

"app-plus" : {
        "usingComponents" : true,
        "nvueCompiler" : "uni-app",
        "compilerVersion" : 3,
        高斯模糊配置
		"safearea" : {  
		    "bottom" : {  
		        "offset" : "none"  
		    }  
		},
        "splashscreen" : {
            "alwaysShowBeforeRender" : true,
            "waiting" : true,
            "autoclose" : true,
            "delay" : 0
        },
   }

然后再page.json中加入高斯模糊

"tabBar": {
		"color": "#fff",
		"selectedColor": "#7BB4FF",
		"borderStyle": "black",
		"blurEffect": "extralight",
	},

在这里插入图片描述

也可以用scroll-view包裹一下