uni-app自定义微信小程序头部导航栏

这篇具有很好参考价值的文章主要介绍了uni-app自定义微信小程序头部导航栏。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

一、子组件代码

1、完整子组件代码 

2、子组件配置项Props 

二、父组件引用代码 

1 、将头部导航注册成全局组件(main.js)

2、获取设备信息(App.vue)

3、页面导入自定义导航组件

(3-1)、默认配置效果图例

(3-2)、更改配置效果图例 



一、子组件代码

1、完整子组件代码 
<template>
	<view class="header-nav-box"
		:style="{'height':Props.imgShow?'':Props.statusBarHeight+'px','background':Props.imgShow?'':Props.bgColor||'#9cf'}">
		<!-- 是否使用图片背景 false -->
		<image v-if="Props.imgShow||false" :src="imgUrl||'../../static/flower.jpg'" mode="scaleToFill"
			style="width: 100%; height: 400rpx;" />
		<!-- 导航内容 -->
		<view class="nav-box-item" :style="{'top':Props.capsuleTop+'px','color':Props.textColor||'#FFF'}">
			<view class="back" v-if="Props.blackShow||true" @click="back">
				<uni-icons type="back" size="18" :color="Props.iconColor||'#FFF'" />
				<block>{{Props.backText||'返回'}}</block>
			</view>
			<view class="title">
				<block>{{title}}</block>
			</view>
		</view>
		<!-- 自定义内容插槽 -->
		<slot name="content"></slot>
	</view>
</template>

<script>
	export default {
		name: "HeaderNav",
		data() {
			return {};
		},
		props: {
			Props: {
				type: Object,
				default: () => {}
			},
			title: {
				type: String,
				default: '默认标题'
			}
		},
		methods: {
			// 返回按钮回调函数
			back() {
				uni.navigateBack({
					data: 1
				})
				this.$emit('back')
			}
		}
	}
</script>

<style lang="scss">
	.header-nav-box {
		position: relative;

		.nav-box-item {
			height: 54rpx;
			position: absolute;
			display: flex;
			align-items: center;
			font-size: 34rpx;
			width: 100%;

			.back {
				width: 25%;
				padding-left: 10rpx
			}

			.title {
				width: 49%;
				text-align: center;
			}
		}
	}
</style>
2、子组件配置项Props 
//配置项
Props:{
imgShow: "", //不传参则默认隐藏状态(false),且使用默认背景色
statusBarHeight: "", //导航高度(动态获取传参)
bgColor: "", //导航栏背景色,不传参则默认#9CF
capsuleTop: "", //胶囊顶部距离(动态获取传参)
textColor: "", //导航标题字体颜色(不传默认#FFF)
iconColor: "", //icon图标颜色(不传默认#FFF)
blackShow: "", //是否显示返回字体及icon图标(不传默认显示true)
backText: "", //默认字体(返回)
},
title:"默认标题"//导航标题内容(不传则为默认内容)

 大家可根据自身项目的业务进行更改,合理使用,参考写出与自身项目中相符合的写法。也可在配置项中增加自己的想法,或删减自己认为多余的部分,一切根据自己的想法逻辑去实现,我这个只是提供一个自己所理解的参考写法。

二、父组件引用代码 

1 、将头部导航注册成全局组件(main.js)

 组件名称可自行命名“HeaderNav”

// 注册全局组件
import HeaderNav from "@/components/HeaderNav"
Vue.component("HeaderNav", HeaderNav)
2、获取设备信息(App.vue)
<script>
	export default {
		globalData: {
			statusBarHeight: "", //导航栏高度
			capsuleTop: "", //胶囊距离顶部位置
			capsuleHeight: "", //胶囊高度
		},
		onLaunch: function() {
			let custom = uni.getMenuButtonBoundingClientRect() //获取右上角胶囊信息
			let system = uni.getSystemInfoSync() //获取设备信息
			this.globalData.statusBarHeight = system.statusBarHeight + system.safeArea.top
			this.globalData.capsuleTop = custom.top
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

<style>
	/*每个页面公共css */
</style>
3、页面导入自定义导航组件

 当前为默认导入子组件(配置项参数为进行任何更改)状态,默认使用背景色#9CF,可自行根据业务需求更改背景色或渐变背景色

<template>
	<view id="container">
		<HeaderNav :Props="Props" @black="black" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				Props: {
					imgShow: "", //不传参则默认隐藏状态(false),且使用默认背景色
					statusBarHeight: "", //导航高度(动态获取传参)
					bgColor: "", //导航栏背景色,不传参则默认#9CF
					capsuleTop: "", //胶囊顶部距离(动态获取传参)
					textColor: "", //导航标题字体颜色(不传默认#FFF)
					iconColor: "", //icon图标颜色(不传默认#FFF)
					blackShow: "", //是否显示返回字体及icon图标(不传默认显示true)
					backText: "", //默认字体(返回)
				}
			}
		},
		onLoad() {
			this.Props.statusBarHeight = getApp().globalData.statusBarHeight
			this.Props.capsuleTop = getApp().globalData.capsuleTop
		},
		methods: {
			black() {
				console.log("返回上一页回调事件");
			}
		}
	}
</script>

<style lang="scss" scoped>
	#container {}
</style>
(3-1)、默认配置效果图例

uniapp微信小程序自定义导航栏,uni-app,uni-app,微信小程序

(3-2)、更改配置效果图例 

使用背景图头部导航效果 ,仅配置部分参数,剩余参数配置根据需求配置,部分配置项代码如下;

<HeaderNav :title="title" :Props="Props" @black="black" />
title: "我的导航",
Props: {
	imgShow: true, //不传参则默认隐藏状态(false),且使用默认背景色
	statusBarHeight: "", //导航高度(动态获取传参)
    bgColor: "", //导航栏背景色,不传参则默认#9CF
    capsuleTop: "", //胶囊顶部距离(动态获取传参)
    textColor: "", //导航标题字体颜色(不传默认#FFF)
    iconColor: "", //icon图标颜色(不传默认#FFF)
    blackShow: "", //是否显示返回字体及icon图标(不传默认显示true)
    backText: "后退", //默认字体(返回)
}

uniapp微信小程序自定义导航栏,uni-app,uni-app,微信小程序

完成上述步骤,即可得到一个简易的头部导航子组件的封装啦,大家可根据自己项目需求更改,直接copy即可使用,简单易上手。傻瓜式写法!!!各位大佬小声喷哈,哈哈哈哈。文章来源地址https://www.toymoban.com/news/detail-771569.html

到了这里,关于uni-app自定义微信小程序头部导航栏的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【微信小程序】使用uni-app——开发首页搜索框导航栏(可同时兼容APP、H5、小程序)

    目录 前言 App、H5效果 小程序效果 一、兼容APP、H5的方式 二、兼容小程序 三、实现同时兼容 首页都会提供一个搜索框给到客户,让客户自己去搜索自己想要的内容,这里就需要导航栏,来实现搜索页面的跳转,效果如下 在常见titleNView配置代码示例中可以看到基本样式的代码

    2024年02月03日
    浏览(79)
  • uni-app 微信小程序之自定义中间圆形tabbar

    首先在 pages.json 文件中,新建一个 tabbar 页面 此页面主要是写 tabbar的html样式和布局,引用主页面代码,通过 v-if 控制进行展示 index , search , maim , news , me 一级页面 css 样式文件太多了就不贴出来了

    2024年02月03日
    浏览(66)
  • uni-app 头部导航条改为背景图

    将某一页面的导航条,改为背景图 1.在pages.json文件中将要修改的页面,style中的“navigationStyle”设置为custom,取消默认的原生导航栏 2.在要修改的页面中如index1页面 效果如图   苹果手机导航条文字在中间位置,安卓手机导航条问题在靠左位置,更改某一页面,将会与其他页

    2024年02月11日
    浏览(53)
  • 微信小程序自定义头部标题导航栏

    wxml: js: wxss: 样例: 支持透明,标题部分可插槽 支持渐变色  常规居中,左上角icon可自定义,本地或者网络路径皆可 或者无标题,只有左上角icon 文件链接: https://download.csdn.net/download/qq_48702470/87815185 文件解压缩至项目根目录下的components文件夹下即可 使用:在想要使用

    2024年02月11日
    浏览(48)
  • 【小程序】uni-app自定义导航栏适配小程序,对齐胶囊

    实现效果  自定义导航栏对齐胶囊按钮,实现方法是通过获取胶囊按钮的顶部(top)高度和自身高度(height),动态设置导航栏的样式(style)。 通过uni.getMenuButtonBoundingClientRect(),可以获取胶囊按钮的布局位置信息,包括width、height、top、bottom、left、right。 1、定义变量 2、获

    2024年02月13日
    浏览(74)
  • uni-app(微信小程序)自定义日期选择器和时间选择器,解决IOS端和安卓端显示不同问题

    原本用的原生组件picker,设置了开始时间和结束时间,安卓端可以显示可选日期时间部分,但是IOS显示的内容包括一整天时间和N个年,本来只需要选择其中七天,那么其他天不显示,IOS端可以滑到其他日期位置,但是会自己滚回来 IOS端: 安卓: 这里只需要八点后和19点前(

    2024年02月16日
    浏览(95)
  • 微信小程序uni-app

    小程序 是一种不需要下载、安装即可使用的应用,它实现了应用触手可及的梦想,用户扫一扫或者搜一下就能打开应用,也实现了用完即走的理念,用户不用安装太多应用,应用随处可用,但又无须安装卸载。 微信开发文档 1、工作原理 网页开发,渲染线程和脚本是互斥的

    2024年02月10日
    浏览(123)
  • 微信小程序授权(uni-app)

    概述 为了避免重复开发,自己封装了一个通用用户授权回调方法,只需要传入需要授权的scope,权限中文描述、回调函数,就可以实现一整套小程序是否授权、打开授权设置,调用后续操作函数的工作 功能 可以根据自己的实际应用进行微调 目前使用的uni-app版本,可以根据自

    2024年02月16日
    浏览(86)
  • 【uni-app】自定义导航栏

    新手刚玩 uniapp 进行微信小程序,甚至多端的开发。 原生uniapp 的导航栏,并不能满足 ui 的需求,所以各种查阅资料,导航栏自定义内容 整理如下: 需要修改的文件如下: 1、pages.json 修改pages.json,启动导航栏自适应,设置\\\" navigationStyle\\\": \\\"custom\\\" 2、system_info.js 新建 system_info

    2024年02月16日
    浏览(57)
  • 语法速通 uni-app随笔【uni-app】【微信小程序】【vue】

    其中, pages 目录/ index 目录【必有】: index.js 编写业务逻辑 【初始数据,生命周期函数】 index.json 编写配置 index.wxml 编写模板 【可理解为本页html】 index.wxss 【可理解为本页css】 直接输入敲回车,连尖括号都不需要就可以标签补全 1)初始数据写死 在 index.wxml 引入变

    2024年02月12日
    浏览(174)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包