uniapp记录----z-paging的吸顶切换+uniapp自定义导航的实现

本文主要是介绍uniapp记录----z-paging的吸顶切换+uniapp自定义导航的实现，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

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);
	}
}

//  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记录----z-paging的吸顶切换+uniapp自定义导航的实现的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！