uniapp 自制头部左侧胶囊组件

uniapp 自制头部左侧胶囊组件

	// 组件页面
<template>
	<view class="navigation-bar" :style="{height:navBarH}">
		<view class="navigation-bar-fixed" :style="{height:navBarH,background:(!config.transparent&&!config.linear)?config.bgcolor:'transparent'}">
			
			<view v-if="[1,2].indexOf(config.type)!= -1" :class="config.type==1?'navigation-bar-capsule':'navigation-bar-textbox'"
			 :style="{
				top:marTop,
				height:capsuleH,
				lineHeight:capsuleH,
				borderRadius:capsuleBr,
				width:width
				}">
				<view class="button-action" hover-class="button-action-active" @click="back_">
					<image :src="backIcon.icon" mode="">image>
				view>
				<view class="button-v-line">view>
				<view v-if="!config.share" class="button-action" hover-class="button-action-active" @click="home_">
					<image :src="homeIcon.icon" mode="">image>
				view>
				<view v-if="config.share" class="button-action" hover-class="button-action-active">
					<button class="button_clear" open-type="share" hover-class="none">
						<image :src="shareIcon.icon" mode="">image>
					button>
				view>
			view>
			
			<view v-if="[3,4].indexOf(config.type)!= -1" @click="conduct_" :class="config.type == 3?'navigation-bar-custom-capsule':'navigation-bar-custom-textbox'"
			 :style="{
				top:marTop, 
				backgroundColor :BGcolor,
				border:BGborder,
				height:capsuleH,
				lineHeight:capsuleH,
				borderRadius:capsuleBr
				}">
				<image v-if="config.menuIcon" class="custom-icon" :src="config.menuIcon">image>
				<text class="custom-describe" style="color: #ff4200;">{{config.menuText}}text>
			view>


			
			<view class="navigation-bar-title" :style="'margin-top:'+titTop+';color:'+config.fontcolor">{{config.title}}view>
			
			<view v-if="config.linear" class="navigation-bar-linear" :style="{height:navBarH,background:config.bgcolor,opacity:scrollTop/scrollMaxHeight}">view>
		view>
		
		<view :style="{height:navBarH}">view>
		
	view>

template>

<script>
	export default {
		data() {
			return {
				backIcon: {
					icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RERBQTc2QjI3RjgwMTFFQTk0MERCQkYxODQwMUZEMzUiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RERBQTc2QjE3RjgwMTFFQTk0MERCQkYxODQwMUZEMzUiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QUNFMEY5OUY3MDAwMTFFQUIzODc4REQzNEExNUEyRkMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QUNFMEY5QTA3MDAwMTFFQUIzODc4REQzNEExNUEyRkMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7GSO1LAAACF0lEQVR42uyZTShEURTH5yFkCEUWsjFlx0ohIRY+iqXysRKSJGRjY4NixZSNz5TyEcVCMRIToqbssNLYTBaiKEMpjP+t8+p2S5nx3pt3c0/9Fvc0zZwz997zP6erhUIhh8wW45DcVAIqgf+eQFw4H3a5XKYG4/f71RGy8nfHQRCMyZZAAlgDQ8AJ+i27AwZYOtgGFZxvQZYdyAEnQvCjYECGHcgHeyCb1p+gB8xaWkYjtEqwBdJo/QaawI4MVYgF6uGCfwRVRgVvdgKDYBXE0/oWlAJf1JQ4jD9lEvRxvgtQD+6j2kr8whLBMmjkfB5aB+2uxKzG7wvBL4EGs4I3MgFW409BuVDj28GHbbrRH6wA7Ao1vhvM266dFiwFFINNkEq+V9BsZJk0K4FYsELnW7cHWvscFlqkCUwLwbNJpA7cqJHSogR6hXPOZs0zUCRLAqzStIJq8Ey+THAoHC1bH6EXcEC1/458ThpYOmW6A5egBFxzFWoOjABNlkscAGXgmPMNg0WzZw4jq9ATqCFh062NLnuyLGX0nYYYN+erBV6QJYsOfNGgzgYa/fGhEJyDPJmEjA01LbQrzHLN0AqzlXidWgxdKzLAkZFaYUUr4RW0Iom0okumXkjXiitOK2aM0Aorm7kA7YSoFVMydaO6Vmxwvg7Z2ul3mtomaNh3/+XLtHDeidULjQmmqZd6lYBKQCUQVfsWYAACdWj8QkHj8QAAAABJRU5ErkJggg=="
				},
				homeIcon: {
					icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkFDRTBGOTlGNzAwMDExRUFCMzg3OEREMzRBMTVBMkZDIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkFDRTBGOUEwNzAwMDExRUFCMzg3OEREMzRBMTVBMkZDIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QUNFMEY5OUQ3MDAwMTFFQUIzODc4REQzNEExNUEyRkMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QUNFMEY5OUU3MDAwMTFFQUIzODc4REQzNEExNUEyRkMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz684W1cAAACmUlEQVR42uyYX4hMcRTHZ6yxD5R/i0Ka5AEPYhdLWnnwNxQv8jQPK61XtLserCalrAeeUPJ0i0SUlT9LHvy3SXZLkdLKm2IzoWRofX45t07T3dk7c+e3c0e/U5/aOXfv73e/v9/vnHvOTWaz2UQt27hEjZsT4AREtPFBTs/zYvWQmUzGHaFSbSH0wGcYhLMwqVYE7IBnsB2mQxr2wSOYG2cBKTgJ12BKwPWl0AdNcRQwB+7DfkiK7z0sg73wR3yz4QHsjpOA9fAKWpTvHqyEfjgPWyEn1ybCRTgBddUUYO7tgjswQ3zDcAy2wJD6315YDe/kt9mldrgF06ohoAFuw1G1il8kcA+rI6PtDTTLfb5thBewZCwFrIKXMrlvz6ERbo5y71cR2S27ZWw+PIFdtgUkJUgfwjzlPwVr4WPIcczuHJJA/iE+8464BMdLjYuwAswEVyVNpsT3TVbtAOTLWLzLsAY+qAXqlF2cWkkBadnincr3WrLMlYhJZACWSwr2bRM8hQWVELBCXj46yC5IRnlboVRugn+z7K4uRfok3iIJOA0z1dk9Anvge4Urgt9wUMb2j6NJr+eiClik/q6TtHndUgFo3h9nVIwZWxxVwI0A3wZLAjqgvsDXU1ZDo6wNfsI29ba1VYLrZ/klD98WVYBJla2qTBgrq4/UUuoWrlrtZbE20rWU/7OAFumBhwMYLOgZYinAk9JjpJLEi7uAdMTrsYmBnFSXPjkXxE6AE2C/gBrNTIE1QTUcn8qcM6hdnFUwjxUBA9Kh+Z9Iilkq4IOAb0Mh5rFyhEb63hNGQNiFMuN32RJwF9Yl/n2Iyoc4boUtYzHLy7hm/F5bR8jYY/kaUapNrloQh63LXRp1ApwAJ8AJqEn7K8AAUvN7x82wXgwAAAAASUVORK5CYII="
				},
				shareIcon: {
					icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NjEyRkU1MDc4OUNDMTFFQTkwOUNCMTAyRkUwMDY1NzYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NjEyRkU1MDY4OUNDMTFFQTkwOUNCMTAyRkUwMDY1NzYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QUNFMEY5OUY3MDAwMTFFQUIzODc4REQzNEExNUEyRkMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QUNFMEY5QTA3MDAwMTFFQUIzODc4REQzNEExNUEyRkMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7rHPE6AAADZElEQVR42uyZa2iNcRzHn3EYYUQrUTRz1zCiuYxc3qA096L2wiUUKSzNyBmd8EJ4IZQle4GGRZmJ5rKFdy6zZXLNXlgxtzEzNN9/fZ/8ejo7nv85/3PL+dWnfs9znuc5/995/r/rSfJ6vVY8SwcrziVhQMKAhAFxLp5AHxYXF8fUYnNzc/+zNxCEdAdzwAyQCQaBniAJfAavQTW4Acp4LiYMSAPbwAoa4U9SyQSwCnwHZ8BG0BwtJ+4CfKAOrA2weH/SFawES6P1BtT2uADGOs4/BqWgCjwBjaAN9AZDwDSwAIwHraAmGgZkgGugrzh3BxSA2+3c00Cq+NaGcevUR9qAwaCC+1nJL5AHDvOXditPoxGF1J4vEYtXUWQJuB4vmXgXw6OSFjDXwOIvgf6RMCAdbBHHm8FdAz/ifFAL1jFfhM0AFec7UVeOeEwzwe1gEmuhr7QJn1HJ7ii4BYaGw4AeYLk4LtBw2JEMlXsYvZIDXKtC7EOw3a1/ujVA7fVu1Gv4BtxICigHAzUTnI9vxJgBs4R+XmMxm8AA6ipp5YN+TGo2TmlmWF5vMoyOFnqlhgHLhL4b7PvH9arIWwNemvaBdKHXaSY9W84GuO4jWA1m6yxex4AUoTdqPF867M92rimloxc5AoOH5z2x3lIuYo3klHPMD2UmDPgi9D4RMCqZCc5icxSyAS+EPjwCBowQa6s3YUC1I9m4lVahf9O4b7LQ75swoELoCzUWspcV6xFN51/sCK0hG3BF/IIqJ2S7vM8LeoENGosfJ/b9b3DRhAFN4LQ49gVTObqUnUK/DN6aCqP7RSzPZhNvWnKIxZxQaLKcVpHogDg+CLIMLl6V0SfF8QnwwHRHVshy124vrzL9hyqjwE36i8VyIi8cLWULe+B3ohEpZ9UZrE+o2dA9Vql2n51juZzaBVNKPGd53SBqlkOsUqdrPCeTxhexYbKLunmcLYV1LqS+YIpjsDWVLaE92Kpk5fqe4TCVs6As5pKJjmc+48CrNhKDLXufTuKkQjX4ncXQK0PjOWqudJzNTlO4xyr+fCKf9ZFaxFeNe3+AU2AME11TMAswNZ1+xbHIVvbPM7m10hhZOoIP4A14ZP0dr38K9YtN/z+g3kAJiYgENMDfXzqxJol/KRMGJAyIc/kjwADgq6x0iVWy2QAAAABJRU5ErkJggg=="
				},

				navBarH: '',
				marTop: '',
				titTop: '',
				capsuleH: '',
				capsuleBr: '',
				left: '',
				width: ''
			};
		},
		computed: {

		},
		created() {
		
			var menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			var systeminfo = uni.getSystemInfoSync()

			// #ifdef MP 
			// 胶囊位置信息
			this.capsuleH = menuButtonInfo.height + 'px',
			this.capsuleBr = (menuButtonInfo.height) / 2 + 'px',
			this.width = menuButtonInfo.width + 'px'
			this.left = systeminfo.screenWidth - menuButtonInfo.right + 'px'
			//#endif

			//#ifdef MP-WEIXIN
			if (systeminfo.system.indexOf('Android') !== -1) {
				this.navBarH = 48 + systeminfo.statusBarHeight + 'px'
				this.marTop = systeminfo.statusBarHeight + (48 - menuButtonInfo.height) / 2 + 'px'
				this.titTop = systeminfo.statusBarHeight + 24 - 16 + 'px'

			} else if (systeminfo.system.indexOf('iOS') !== -1) {
				this.navBarH = 44 + systeminfo.statusBarHeight + 'px'
				this.marTop = systeminfo.statusBarHeight + (44 - menuButtonInfo.height) / 2 + 'px'
				this.titTop = systeminfo.statusBarHeight + 22 - 16 + 'px'
			} else {
				this.navBarH = 44 + 20 + 'px'
				this.marTop = 20 -1 + (44 - menuButtonInfo.height) / 2 + 'px'
				this.titTop = 20 + 22 - 16 + 'px'
				this.capsuleH = menuButtonInfo.height - 2 + 'px'
				this.capsuleBr = (menuButtonInfo.height - 2) / 2 + 'px'
				this.width = menuButtonInfo.width + 'px'
			}

			//#endif

			//#ifdef MP-BAIDU
			// 自定义导航栏的整体高度
			this.navBarH = systeminfo.navigationBarHeight + systeminfo.statusBarHeight + 'px'

			// 自定义胶囊的上边距和 title的上外边距
			this.marTop = systeminfo.statusBarHeight + (systeminfo.navigationBarHeight - menuButtonInfo.height) / 2 + 'px'
			this.titTop = systeminfo.statusBarHeight + systeminfo.navigationBarHeight / 2 - 16 + 'px'
			//#endif

			// #ifdef MP-ALIPAY
			this.navBarH = systeminfo.statusBarHeight + systeminfo.titleBarHeight + 'px'
			this.marTop = systeminfo.statusBarHeight + (systeminfo.titleBarHeight - menuButtonInfo.height) / 2 + 'px'
			this.titTop = systeminfo.statusBarHeight + systeminfo.titleBarHeight / 2 - 16 + 'px'
			// #endif

		},
		updated() {
			console.log(this.config)
		},
		mounted() {
			console.log(this.config)

		},
		props: {
			BGcolor: {
				type: String,
				default: 'rgba(255,255,255,.5)'
			},
			BGborder: {
				type: String,
				default: 'none'
			},
			config: {
				type: Object,
				default () {
					return {
						title: "",
						bgcolor: "",
						type: 2,
						linear: false,
						transparent: false,
						fontcolor: "#222",
						menuIcon: "",
						menuText: ""
					}
				}
			},
			scrollTop: {
				type: Number,
				default: 0
			},
			scrollMaxHeight: {
				type: Number,
				default: 288
			}
		},
		methods: {
			back_() {
				uni.navigateBack({
					delta: 1
				});
			},
			home_() {
				uni.switchTab({
					url: "/pages/tabBar/home/home"
				})
			},
			conduct_() {
				this.$emit("customConduct")
			}
		}
	}
script>

 
 <style lang="scss">
 	.navigation-bar {
 		box-sizing: border-box;
 
 		.navigation-bar-fixed {
 			width: 100%;
 			position: fixed;
 			top: 0px;
 			box-sizing: border-box;
 			z-index: 999;
 			background: #fff;
 			display: flex;
 			justify-content: center;
 
 			.navigation-bar-linear {
 				width: 100%;
 				position: absolute;
 				box-sizing: border-box;
 				z-index: -1;
 			}
 
 			.navigation-bar-title {
 				width: 280rpx;
 				line-height: 32px;
 				height: 32px;
 				color: #fff;
 				font-size: 16px;
 				white-space: nowrap;
 				text-overflow: ellipsis;
 				overflow: hidden;
 				/* #ifdef MP-BAIDU */
 				text-align: center;
 				/* #endif */
 			}
 
 			.navigation-bar-custom-capsule {
 				position: absolute;
 				display: flex;
 				align-items: center;
 				justify-content: center;
 				height: 32px;
 				left: 10px;
 				padding: 0px 10px;
 				// background-color: rgba(255,255,255,.5);
 				border: .5px solid #eaeaea;
 				border-radius: 16px;
 				// padding: 0 23upx;
 				// border:0.5px solid rgba(255,255,255,.3);
 				box-sizing: border-box;
 				overflow: hidden;
 				z-index: 9;
 
 				.custom-icon {
 					width: 24px;
 					height: 24px;
 				}
 
 				.custom-describe {
 					font-size: 14px;
 				}
 			}
 
 			.navigation-bar-custom-textbox {
 				position: absolute;
 				display: flex;
 				align-items: center;
 				justify-content: center;
 				height: 32px;
 				left: 0px;
 				padding: 0 23upx;
 				// border:0.5px solid rgba(255,255,255,.3);
 				box-sizing: border-box;
 				overflow: hidden;
 				z-index: 9;
 
 				.custom-icon {
 					width: 24px;
 					height: 24px;
 				}
 
 				.custom-describe {
 					font-size: 32upx;
 				}
 			}
 
 			.navigation-bar-textbox {
 				position: absolute;
 				// height: 32px;
 				display: flex;
 				align-items: center;
 				justify-content: space-between;
 				line-height: 32px;
 				height: 32px;
 				font-size: 30upx;
 				width: 85px;
 				left: 0px;
 				// border:0.5px solid rgba(255,255,255,.3);
 				box-sizing: border-box;
 				overflow: hidden;
 				z-index: 9;
 
 				.button-action {
 					flex: 1;
 					height: 100%;
 					display: flex;
 					align-items: center;
 					justify-content: center;
 
 					.button_clear {
 						line-height: 1;
 						background-color: transparent;
 						border: none;
 						margin: 0;
 						padding: 0;
 					}
 
 					.button_clear::after {
 						border: none;
 					}
 
 					image {
 						width: 24px;
 						height: 24px;
 						// padding: 6upx;
 						box-sizing: border-box;
 					}
 				}
 
 				.button-v-line {
 					width: 1rpx;
 					height: 16rpx;
 					background-color: rgba(0, 0, 0, .2);
 				}
 			}
 
 			.navigation-bar-capsule {
 				position: absolute;
 				display: flex;
 				align-items: center;
 				justify-content: space-between;
 				line-height: 32px;
 				height: 32px;
 				font-size: 30rpx;
 				left: 10px;
 				border: .5px solid #ececec;
 				background-color: rgba(255, 255, 255, .5);
 				border-radius: 16px;
 				// border:0.5px solid rgba(255,255,255,.3);
 				box-sizing: border-box;
 				overflow: hidden;
 				z-index: 9;
 
 				.button-action {
 					flex: 1;
 					height: 100%;
 					display: flex;
 					align-items: center;
 					justify-content: center;
 
 					image {
 						width: 24px;
 						height: 24px;
 						box-sizing: border-box;
 					}
 
 					.button_clear {
 						line-height: 1;
 						background-color: transparent;
 						border: none;
 						margin: 0;
 						padding: 0;
 						text-decoration: none;
 					}
 
 					.button_clear::after {
 						border: none;
 					}
 				}
 
 				.button-action-active {
 					background-color: rgba(0, 0, 0, .3)
 				}
 
 				.button-v-line {
 					width: 0.5px;
 					height: 18px;
 					background-color: rgba(0, 0, 0, .2);
 				}
 			}
 		}
 	}
 style>
 

// 页面
<template>
	<view class="content">

		<navigation-custom :config="config" :scrollTop="scrollTop" @customConduct="customConduct" :scrollMaxHeight="scrollMaxHeight" />

	view>
template>

<script>
	import navigationCustom from '@/components/my-navigation/my-navigation.vue'
	export default {
		components: {
			navigationCustom
		},
		data() {
			return {
				config: {
					title: "自定义标题", //title
					bgcolor: "#ff4200", //背景颜色
					// fontcolor:"red", //文字颜色，默认白色
					type: 1, //type 1，3胶囊 2，4无胶囊模式
					transparent: true, //是否背景透明 默认白色
					linear: true, //是为开启下滑渐变
					share: true, //是否将主页按钮显示为分享按钮
					// menuIcon:"../static/icon/back_.png", 当type为3或者4的时候左边的icon文件位置，注意位置与当前页面不一样
					// menuText:"返回", 当type为3或4的时候icon右边的文字
				},
				scrollTop: 0, // 当linear为true的时候需要通过onpagescroll传递参数
				scrollMaxHeight: 200 //滑动的高度限制，超过这个高度即背景全部显示
			}
		},
		onLoad() {
			//  下面代码为从分享页面进入到当前页，只显示一个按钮
			if(getCurrentPages().length === 1){
				// 只有一个页面栈，即从分享中进来的
				this.config.type = 4
				this.config.menuIcon = ''
			}else{
				this.config.type = 1
			};
		},
		onPageScroll(e) {
			// 下面的代码控制的是开启下拉渐变
			this.scrollTop = e.scrollTop;
		},
		methods: {
			customConduct() {
				//当config type 为 4或者3 的时候 自定义methods
				console.log('自定义点击事件')
			},
		}
	}
script>

<style>
	
style>

<script>
   // app.vue 配置，获取手机权限
	export default {
		globalData: {
			menuButtonInfo:'',
			systeminfo:''
		},
		onLaunch: function() {
			this.globalData.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			this.globalData.systeminfo = uni.getSystemInfoSync()
			console.log('App Launch')
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>