标签：uniapp 自定义 高度 graceJS ---- paging 全屏 导航

uniapp实现自定义导航

一.pages.json配置

{
   	    "path" : "pages/tabbar/shuoshuo/shuoshuo",
   	    "style" :                                                                                    
   	    {
   	        "navigationBarTitleText": "",
   		"navigationStyle":"custom",
   	        "enablePullDownRefresh": true,
   			"app-plus": {
   			    "scrollIndicator":"none"
   			}
   	    }
   	    
   	}

二.使用graceui的页面模式进行开发

<gui-page :customHeader="true">
   	<!-- 自定义头部导航 -->
   	<view slot="gHeader">
</view>
</gui-page>

三.z-paging吸顶加切换
1.全拼模式的时候，z-paging的吸顶，会直接吸附在，手机屏幕的最上方，吸顶的tab，会和状态栏重叠交错。
2.原生导航的时候，全屏模式，会吸附在原生导航下面。但是不能自定义导航，就无法在导航中，添加丰富的内容。
3.所以要自定义导航+非全屏模式

4.z-paging的非全屏模式，需要两点配置。给z-paging组件，:fixed="false" height="1000rpx".
也就是取消全屏，并且给一个具体的高度。

四.uniapp+graceui+nvue+z-paging这种模式下的高度计算
1.状态栏高度

<script>
var graceJS = require('@/GraceUI5/js/grace.js');
export default{
	onLoad : function(){
		var systemInfo = graceJS.system();
		console.log(systemInfo);
	}
}

2.自定义导航高度 要使用元素选择，来计算自定义导航的高度。由于是nvue，要考虑使用weex里的dom模块 

//  1.获取页面主体高度
			graceJS.getRefs('guiPage', this, 0, (ref)=>{
				ref.getDomSize('guiPageBody', (e)=>{
					// console.log(e)
					// 2. 导航的高度
					// 可以 使用 graceJS.select() 函数动态获取， 也可以使用 uni.upx2px 转换已知高度
					// 轮播主体高度 = 页面高度 - 导航高度
					this.mainHeight   = e.height;
					
					console.log(this.mainHeight)
					
				});
			});

3.屏幕高度
参考第二条
4.z-paging的高度=3-2-1

标签：uniapp,自定义,高度,graceJS,----,paging,全屏,导航
来源： https://www.cnblogs.com/cn-oldboy/p/16479865.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。