uniapp 动态导航栏 原生导航栏 原生导航栏样式动态变化

先效果图:
在这里插入图片描述
一开始导航栏是透明的,页面拉下去后变成非透明。

1.首先怎么把导航栏变透明
https://uniapp.dcloud.io/collocation/pages?id=style
其中有关导航栏的只有这几条:
在这里插入图片描述
看到第一条,改颜色,就是这个啦。
但是要注意一点,page.json中还有全局的修改(https://uniapp.dcloud.io/collocation/pages?id=globalStyle)。因为一般应用有需要导航栏的页面,也有不需要导航栏的页面。一般不需要导航栏的页面多,因此会在全局设置中,把navigationStyle设置成custom。因此设单独页面的导航栏时候,要在单独页面设置navigationStyle为default。

{
	"path": "pages/device/detail/index",
	"style": 
	{
		"navigationStyle": "default", 	// 如果全局设了navigationStyle=custom就要加这个
		"navigationBarBackgroundColor": "#FF6363",
		"navigationBarTextStyle": "white"
	}      
}

那怎么让他透明呢?
首先,不能用#00000000这种透明,也不能用transparent(古老版本可以),因为文档中更新了类型必须为HexColor,HexColor只有6位,因此不支持透明,文字transparent自然也不行了。
因此只能用app-plus,这里有一个坑,加了这个以后,就默认你是使用导航栏了,也就相当于默认写了个"navigationStyle": “default”,就会顶掉全局的了。另外,也会使得navigationBarBackgroundColor失效。
app-plus.titleNView.backgroundColor中的入参是string,并且支持rgba,因此就可以透明啦。
最终代码:

{
            "path" : "pages/device/detail/index",
            "style" :                                                                                    
            {
				"navigationBarTextStyle": "white",
				"app-plus": {
					"titleNView": {
						"type": "float",
						"backgroundColor":"rgba(0,0,0,0)",
					}
				}
            }
        }

至此就实现了透明
怎么让滑动的时候不透明呢?
首先确定变化的时机,是页面拖动到起始不是0的时候,这里uniapp有个生命周期onPageScroll可以监控(https://uniapp.dcloud.io/collocation/frame/lifecycle?id=%e9%a1%b5%e9%9d%a2%e7%94%9f%e5%91%bd%e5%91%a8%e6%9c%9f)
再看app-plus的文档(https://uniapp.dcloud.io/collocation/pages?id=app-plus)经过在文档里嵌套好几层的跳转,跳到了这个页面(https://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewTitleNViewStyles),其中有些属性可以动态修改,也有为了修改而暴露出的方法。
接下来不写分析了,太长,直接上最终代码:
在页面中的script加上:一个生命周期

onPageScroll(e) {
			if(e.scrollTop===0){
				this.$mp.page.$getAppWebview().setStyle({titleNView:{backgroundColor:'#00000000'}})
			}else{
				this.$mp.page.$getAppWebview().setStyle({titleNView:{backgroundColor:'#0C54A3'}})
			}
		},

就可以实现拉下来的时候不透明,最上方的时候透明了

  • 5-31 另一个项目中又用了一次这个,因此把这个提出成一个mixin,下次再用page.json中配置完以后直接引入就行了,方便一点。
  • 6-02 1、新增了参数来控制滑动到多少的时候才变,原来是不为0就变。2、新增了一个变量来记录是否位于范围,防止一直滚动页面的时候一直设相同的导航栏样式,浪费资源(不知道是否会浪费资源,做最坏的打算,所以先写上)

页面demo:

<template>
	<view class="test">
		detail
	</view>
</template>

<script>
	import { navigationScrollMixins } from "@/component/navigationScrollMixins.js";
	export default {
		mixins: [navigationScrollMixins],
		// navigationScrollMixinsFlag: 160, // 利用Mixin的替代规则:这个加了就按这个,没加就按Mixin里设定的
	}
</script>

<style scoped>
	.test{
		background-color: red;
		height: 150%;
	}
</style>

navigationScrollMixins.js:

export const navigationScrollMixins = {
	onPageScroll(e) {
		if(this.scrollAtRange && (e.scrollTop > this.navigationScrollMixinsFlag)){
			this.$mp.page.$getAppWebview().setStyle({titleNView:{backgroundColor:'#0C54A3'}})
			this.scrollAtRange = false
		}
		if(!this.scrollAtRange && (e.scrollTop < this.navigationScrollMixinsFlag)){
			this.$mp.page.$getAppWebview().setStyle({titleNView:{backgroundColor:'#00000000'}})
			this.scrollAtRange = true
		}
	},
	data() {
		return{
			scrollAtRange: true, // 记录是否位于范围,防止一直滚动页面的时候一直设相同的导航栏样式,浪费资源
			navigationScrollMixinsFlag : 0,
		}
	}
}
  • 2
    点赞
  • 23
    收藏
    觉得还不错? 一键收藏
  • 11
    评论
Uniapp中,可以通过配置文件pages.json来设置自定义导航样式。具体的配置如下所示: 在pages.json中,可以为每个页面设置导航样式。例如,可以在某个页面的配置项中添加"navigationStyle":"custom"来取消默认的原生导航,只保留右上角的胶囊按钮。同时,可以设置navigationBarTitleText来指定导航的标题文字颜色,navigationBarTextStyle来指定导航的文字样式。 在页面的模板文件中,可以使用自定义的导航样式。例如,可以在模板文件中添加一个view元素,设置class为"status_bar"来表示状态样式。可以在该view元素中添加其他的子元素,来实现自定义的导航内容。 同时,可以通过CSS样式来设置导航样式。可以为状态设置固定的高度和宽度,并设置背景色、位置等属性。可以为导航中的文字内容设置样式,如字体大小、颜色等。 需要注意的是,如果只写了一部分CSS样式,自定义的标题内容可能会随着页面滚动而移动。为了固定在页面的头部,可以设置position为fixed,并指定top属性为0。 综上所述,Uniapp中实现自定义导航样式的步骤包括: 1. 在pages.json中为每个页面设置导航样式,包括取消默认导航和设置标题文字颜色等。 2. 在页面的模板文件中添加自定义导航的HTML结构,可以使用view元素来表示状态导航内容。 3. 使用CSS样式来设置导航样式,包括状态的高度、背景色等,以及导航内容的样式。 希望以上信息对您有所帮助。\[1\]\[2\]\[3\] #### 引用[.reference_title] - *1* *2* *3* [uni-app 小程序自定义导航](https://blog.csdn.net/weixin_44711440/article/details/116486458)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 11
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值