草庐IT

uniapp顶部状态栏自定义设置

侠客博园 2023-04-13 原文

步骤：

第一步：现在pages.json文件夹中设置：
“navigationStyle”: “custom” （取消默认的原生导航栏）如需其它设置 uniapp

代码：

（样式设置这里相当于全局设置）

（或者可以根据业务需求设置单页面自定义导航栏）

第二步：将顶部状态栏自定义设置封装成组件提高组件复用性
代码块：

<template>
	<view class="_navbar" :style="{ height:`${trStyle.height + trStyle.top + bottomEx}px`}">
		<view class="_navbar_container" :style="{ height:`${trStyle.height}px`,top:`${trStyle.top}px` }">
			<view  class="_navbar_back" @click="uni.navigateBack()">
				<i class="iconfont icon-arrow-left-bold" style="font-size:40rpx"></i>
				<view class="zuo"><image src="../../static/zuojiantou.png" mode="" class="img"></image></view>
			
			</view>
			<view :style="{ height:`${trStyle.height }px`,lineHeight:`${trStyle.height }px` }" class="_navbar_title">{{ title }}</view>
		</view>
	</view>
</template>

<script>
	export default{
			name:"Navbar",
		data(){
			return {
				trStyle:uni.getMenuButtonBoundingClientRect(),
				background :'transparent',
				bottomEx:10,
			}
		},
		mounted(){	
			uni.$on('pageScroll',top => {
				let parentRoute = this.$parent.$scope.route
				let pages = getCurrentPages()
				let page = pages[pages.length - 1]
				let currentRoute = page.route
				if(parentRoute === currentRoute){
					this.$nextTick(()=>{
						if(top === 0) this.background = 'transparent'
						else if(top > this.trStyle.height + this.trStyle.top + this.bottomEx) this.background = '#2D248B'
						else this.background = `rgba(#2D248B, ${ top/this.trStyle.height + this.trStyle.top + this.bottomEx })`
					})
				}
			})
		},
		beforeUnmount(){
			uni.$off('pageScroll')
		},
		props:{
			back:{
				type:Boolean,
				default:true,
			},
			title:{
				type:String,
				default:'某某职业技术学院'
			}
		},
	}
</script>

<style lang="scss">
	@import '~@/styles/variable.scss';
	@import '~@/styles/mixins.scss';
	._navbar{
		width:750rpx;
		position:fixed;
		z-index:10000;
		transition:all 0.2s linear;
		background: linear-gradient(90deg, #AF251A 0%, #FA582B 51%, #AF251A 100%);
		._navbar_container{
			width:750rpx;
			position:absolute;
			left:0;
			bottom:0;
			._navbar_back{
				width: 100rpx;
				.img{
					width: 38rpx;
					height: 38rpx;
				}
				@include flex();
				color:#000;
				height:100%;
				font-size:40rpx;
				//margin-left:20rpx;
				cursor:pointer;
			}
			._navbar_title{
				position:absolute;
				left:50%;
				top:0rpx;
				height:100%;
				transform:translateX(-50%);
				font-size:30rpx;
				font-family: Alibaba PuHuiTi 2.0-55 Regular, Alibaba PuHuiTi 20;
				font-weight: normal;
				color:#FFF;
			}
		}
		
	}
</style>

第三步：将组件引入页面：

第四步：在页面data中设置：

根据以上步骤设置不会出现报错问题（本人在实际项目开发中使用）
此组件适配各种机型（包括iOS机型）

自定uniappspanclasstokenjavascriptvue.js小程序

有关uniapp顶部状态栏自定义设置的更多相关文章

  1. ruby - 使用 RubyZip 生成 ZIP 文件时设置压缩级别 - 2

    我有一个Ruby程序，它使用rubyzip压缩XML文件的目录树。gem。我的问题是文件开始变得很重，我想提高压缩级别，因为压缩时间不是问题。我在rubyzipdocumentation中找不到一种为创建的ZIP文件指定压缩级别的方法。有人知道如何更改此设置吗？是否有另一个允许指定压缩级别的Ruby库？ 最佳答案 这是我通过查看ruby​​zip内部创建的代码。level=Zlib::BEST_COMPRESSIONZip::ZipOutputStream.open(zip_file)do|zip|Dir.glob("**/*")d

  2. ruby - Facter::Util::Uptime:Module 的未定义方法 get_uptime (NoMethodError) - 2

    我正在尝试设置一个puppet节点，但ruby​​gems似乎不正常。如果我通过它自己的二进制文件(/usr/lib/ruby/gems/1.8/gems/facter-1.5.8/bin/facter)在cli上运行facter，它工作正常，但如果我通过由ruby​​gems(/usr/bin/facter)安装的二进制文件，它抛出:/usr/lib/ruby/1.8/facter/uptime.rb:11:undefinedmethod`get_uptime'forFacter::Util::Uptime:Module(NoMethodError)from/usr/lib/ruby

  3. ruby - 在 Ruby 程序执行时阻止 Windows 7 PC 进入休眠状态 - 2

    我需要在客户计算机上运行Ruby应用程序。通常需要几天才能完成(复制大备份文件)。问题是如果启用sleep，它会中断应用程序。否则，计算机将持续运行数周，直到我下次访问为止。有什么方法可以防止执行期间休眠并让Windows在执行后休眠吗？欢迎任何疯狂的想法;-) 最佳答案 Here建议使用SetThreadExecutionStateWinAPI函数，使应用程序能够通知系统它正在使用中，从而防止系统在应用程序运行时进入休眠状态或关闭显示。像这样的东西:require'Win32API'ES_AWAYMODE_REQUIRED=0x0

  4. ruby-openid:执行发现时未设置@socket - 2

    我在使用omniauth/openid时遇到了一些麻烦。在尝试进行身份验证时，我在日志中发现了这一点:OpenID::FetchingError:Errorfetchinghttps://www.google.com/accounts/o8/.well-known/host-meta?hd=profiles.google.com%2Fmy_username:undefinedmethod`io'fornil:NilClass重要的是undefinedmethodio'fornil:NilClass来自openid/fetchers.rb，在下面的代码片段中:moduleNetclass

  5. ruby-on-rails - Rails 3.2.1 中 ActionMailer 中的未定义方法 'default_content_type=' - 2

    我在我的项目中添加了一个系统来重置用户密码并通过电子邮件将密码发送给他，以防他忘记密码。昨天它运行良好(当我实现它时)。当我今天尝试启动服务器时，出现以下错误。=>BootingWEBrick=>Rails3.2.1applicationstartingindevelopmentonhttp://0.0.0.0:3000=>Callwith-dtodetach=>Ctrl-CtoshutdownserverExiting/Users/vinayshenoy/.rvm/gems/ruby-1.9.3-p0/gems/actionmailer-3.2.1/lib/action_mailer

  6. ruby-on-rails - 如何使用 instance_variable_set 正确设置实例变量？ - 2

    我正在查看instance_variable_set的文档并看到给出的示例代码是这样做的:obj.instance_variable_set(:@instnc_var,"valuefortheinstancevariable")然后允许您在类的任何实例方法中以@instnc_var的形式访问该变量。我想知道为什么在@instnc_var之前需要一个冒号:。冒号有什么作用？ 最佳答案 我的第一直觉是告诉你不要使用instance_variable_set除非你真的知道你用它做什么。它本质上是一种元编程工具或绕过实例变量可见性的黑客攻击

  7. ruby-on-rails - form_for 中不在模型中的自定义字段 - 2

    我想向我的Controller传递一个参数，它是一个简单的复选框，但我不知道如何在模型的form_for中引入它，这是我的观点:{:id=>'go_finance'}do|f|%>Transferirde:para:Entrada:"input",:placeholder=>"Quantofoiganho?"%>Saída:"output",:placeholder=>"Quantofoigasto?"%>Nota:我想做一个额外的复选框，但我该怎么做，模型中没有一个对象，而是一个要检查的对象，以便在Controller中创建一个ifelse，如果没有检查，请帮助我，非常感谢,谢谢

  8. ruby - 主要 :Object when running build from sublime 的未定义方法 `require_relative' - 2

    我已经从我的命令行中获得了一切，所以我可以运行rubymyfile并且它可以正常工作。但是当我尝试从sublime中运行它时，我得到了undefinedmethod`require_relative'formain:Object有人知道我的sublime设置中缺少什么吗？我正在使用OSX并安装了rvm。 最佳答案 或者，您可以只使用“require”，它应该可以正常工作。我认为“require_relative”仅适用于ruby​​1.9+ 关于ruby-主要:Objectwhenrun

  9. ruby-on-rails - date_field_tag，如何设置默认日期？ [ rails 上的 ruby ] - 2

    我想设置一个默认日期，例如实际日期，我该如何设置？还有如何在组合框中设置默认值顺便问一下，date_field_tag和date_field之间有什么区别？ 最佳答案 试试这个:将默认日期作为第二个参数传递。youcorrectlysetthedefaultvalueofcomboboxasshowninyourquestion. 关于ruby-on-rails-date_field_tag，如何设置默认日期？[rails上的ruby]，我们在StackOverflow上找到一个类似的问

  10. ruby-on-rails - 跳过状态机方法的所有验证 - 2

    当我的预订模型通过rake任务在状态机上转换时，我试图找出如何跳过对ActiveRecord对象的特定实例的验证。我想在reservation.close时跳过所有验证!叫做。希望调用reservation.close!(:validate=>false)之类的东西。仅供引用，我们正在使用https://github.com/pluginaweek/state_machine用于状态机。这是我的预订模型的示例。classReservation["requested","negotiating","approved"])}state_machine:initial=>'requested

随机推荐