uniapp自定义头部导航

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

uniapp自定义头部导航文章来源地址https://www.toymoban.com/news/detail-848621.html

<template>
	<view>
		<view class="dynamic" :style="{'border-bottom':borderBottom}">
			<view :style="{'width':'100%','height':statusBarHeight+'px','background-color':backgourndColor}"></view>
			<view class="dynamicBox" :style="{'background-color':backgourndColor,'height':'80rpx','width':'100%'}">
				<view :style="{'width': bothSidesWidth,'height': '100%','display': 'flex','align-items': 'center'}" v-if="pattern!='normal'">
					<image src="/static/image/whiteBack.png" @tap="goback" style="width: 44rpx;height: 44rpx;"></image>
				</view>
				<image src="/static/image/whiteBack.png" v-if="pattern=='normal'" @tap="goback" style="width: 44rpx;height: 44rpx;"></image>
				<view class="navtitle" :style="{'color':fontColor,'font-size':fontSize,'font-weight':fontWeight}">{{title}}</view>
				<view :style="{'width': bothSidesWidth,'height':'100%'}" v-if="pattern!='normal'">
					<slot></slot>
				</view>
				<view style="width: 44rpx;height:100%;" v-if="pattern=='normal'"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				statusBarHeight:getApp().globalData.mySystemInfo.statusBarHeight,//状态栏高度
			}
		},
		props:{
			//名称
			title:{
				type:String,
				default:'详情'
			},
			//右侧是否显示
			pattern:{
				type:String,
				default:'normal'
			},
			//背景颜色
			backgourndColor:{
				type:String,
				default:'#ffc526'
			},
			//文字颜色
			fontColor:{
				type:String,
				default:'#fff'
			},
			//两侧宽度
			bothSidesWidth:{
				type:String,
				default:'130rpx'
			},
			//下边框
			borderBottom:{
				type:String,
				default:'none'
			},
			//返回按钮形式
			backType:{
				type:String,
				default:'normal'
			},
			//文字大小
			fontSize:{
				type:String,
				default:'34rpx'
			},
			//文字加粗
			fontWeight:{
				type:Number,
				default:600
			}
		},
		methods:{
			//返回
			goback(e){
				if(this.backType == 'normal'){
					uni.navigateBack()
				}else{
					this.$emit('backOperation')
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.dynamic{
		width: 100%;		
		.dynamicBox{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 20rpx;
			box-sizing: border-box;
			font-size: 0;
			.navtitle{
				max-width: 500rpx;
				white-space: nowrap;
				overflow: hidden;
			}
		}
	}
</style>

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

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

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

相关文章

  • uni-app微信小程序,APP都适用自定义顶部导航

    *使用自定义的导航样式,首先需要把原生的顶部的导航方式给隐藏掉(\\\"navigationStyle\\\": \\\"custom\\\") *手机顶部手机状态栏的高度 *微信小程序中胶囊的位置信息存储(使用store存储) *由于微信小程序中带有导航胶囊,所以需要根据胶囊去获取一定的参数信息 在微信小程序中,我们只需要获

    2024年02月06日
    浏览(65)
  • uni-app实现自定义导航栏,兼容H5、App、微信小程序

    很多情况下,系统自带的导航栏无法满足UI设计的要求,这时候就需要我们自定义导航栏来实现需求,要考虑跨端的多种情况,这里我们封装成一个组件来使用,实现效果如下: 一、H5、App、微信小程序的区别 1.H5:导航栏高度可以设为44px,它没有状态栏,因为H5端运行在浏览

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

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

    2024年02月13日
    浏览(74)
  • 前端vue uni-app自定义精美海报生成组件

    在当前技术飞速发展的时代,软件开发的复杂度也在不断提高。传统的开发方式往往将一个系统做成整块应用,一个小的改动或者一个小功能的增加都可能引起整体逻辑的修改,从而造成牵一发而动全身的情况。为了解决这个问题,组件化开发逐渐成为了一种趋势。通过组件

    2024年02月14日
    浏览(63)
  • uniapp自定义头部导航

    uniapp自定义头部导航

    2024年04月12日
    浏览(43)
  • uni-app 使用 Uview2.x 搭建自定义tabbar组件,自定义navbar,还会解决自定义导航栏引起闪烁性能差的问题!!!

    pages.json  上面可以看到tabbar我使用的原生的,但是值配置了pagepath,并且page里三个首页都可以自定义顶部导航栏,当然如果删掉custom那一行代码,就切换成原生顶部导航栏了。 下面拿一个首页作为代码演示:(顶部自定义导航栏组件和底部导航栏组件会放在最后) 下图组件

    2023年04月09日
    浏览(90)
  • uniapp自定义导航和头部

       src/compontents/uni-nav-bar/uni-nav-bar.vue src/compontents/uni-tab-bar/uni-tab-bar.vue src/layout/index.vue src/pages/home/index.vue src/pages/mine/index.vue App.vue global.js main.js page.json .eslintrc.js .prettierrc.js .gitignore忽略文件

    2024年02月09日
    浏览(45)
  • uniapp小程序自定义头部导航

    我们在开发小程序时,自带的头部导航样式往往不能满足需求,故只能自定义导航,接下来简要介绍下如何实现: 1. 去除自带的头部导航 要想自定义头部导航,首先要到pages.json文件夹中,找到对应页面,然后在style中写上代码: 2.封装自定义的头部导航 一个小程序,可能会

    2024年02月11日
    浏览(57)
  • uni-app顶部导航条固定

    1.准备 scroll-view 滚动容器,包裹需要滚动的区域 2.给父容器page设置高度为100%,完全撑开,开启并flex弹性盒,给滚动容器设值flex值为1 这里父容器必须要给高度,要不然顶部固定不起效

    2024年02月02日
    浏览(43)
  • 前端uni-app自定义精美全端复制文本插件,支持全端文本复制插件 可设置复制按钮颜色

    随着技术的发展,开发的复杂度也越来越高,传统开发方式将一个系统做成了整块应用,经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改,造成牵一发而动全身。 通过组件化开发,可以有效实现单独开发,单独维护,而且他们之间可以随

    2024年02月16日
    浏览(47)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包