增加公共小程序顶部自定义导航组件

components/cu-custom.vue

@@ -0,0 +1,135 @@
+<template name="headerNavbar">
+	<!-- 自定义导航栏 -->
+	<view class='navbar-wrap' :style="{height:CustomBar+'px',paddingTop:StatusBar+'px'}"> 
+	  	<view class="navbar-text" :style="{lineHeight:(CustomBar - StatusBar)+'px;',fontSize:fontSizeSetting+'px;'}" :class="platformClass">
+	    	{{navbarData.title ? navbarData.title : " "}}
+	  	</view>
+	  	<view class="navbar-icon" v-if="navbarData.showCapsule == 1 ? true : false" 
+			  :style="{top:capsule.top +'px;',left:((screenWidth-capsule.right)+5)+'px;',height:capsule.height+'px;',lineHeight:capsule.height+'px;'}">
+			  <text v-if="haveBack" @tap="BackPage" class="iconfont icon-fanhui"></text>
+			  <text v-else @tap="_goHome" class="iconfont icon-shouyeyong"></text>
+	  	</view>
+		<view class="navbar-icon" v-if="navbarData.showSearch == 1 ? true : false"
+			  :style="{top:capsule.top+'px;',right:(capsule.width)+'px;',height:capsule.height+'px;',lineHeight:capsule.height+'px;'}">
+			  <text @click.stop="_goSearchPath" class="iconfont icon-iconfonticonfontsousuo1"></text>
+	  	</view>
+	</view>
+</template>
+
+<script>
+	var self;
+	export default{
+		name:'headerNavbar',
+		props:{
+		    navbarData: { // 由父页面传递的数据
+				type: Object
+		    }
+		},
+		data() {
+			return{
+				haveBack: true,     // 是否有返回按钮，true 有 false 没有 若从分享页进入则为 false
+				CustomBar:this.CustomBar,// 顶部导航栏高度
+				StatusBar: this.StatusBar,
+				fontSizeSetting:this.fontSizeSetting,
+				screenWidth:this.screenWidth,
+				capsule:this.capsule,
+				platformClass:this.platformClass,
+			}
+		},
+		created() {
+			if (getCurrentPages().length === 1) { // 当只有一个页面时
+			      this.haveBack = false;
+			} else {
+			      this.haveBack = true;
+			}
+		},
+		onLoad(){
+			
+		},
+		methods:{
+			BackPage: function () {
+				this.$emit('navigateBack')
+		    },
+			_goSearchPath:function () {
+				this.$emit('goSearchPath')
+			},
+			_goHome:function(){
+				uni.switchTab({
+		        	url: '/pages/tabBar/home/home'
+		      	})
+			}
+		},
+		onShow(){
+	
+		}
+	}
+</script>
+
+<style lang="scss">
+	.navbar-wrap {
+		 position: fixed;
+		 width: 100%;
+		 top: 0;
+		 z-index: 100000;
+		 box-sizing: border-box;
+		 background: #FFFFFF;
+		 border-bottom: 1px solid #F7F7F7;
+	}
+	.navbar-text {
+		 font-size: 30rpx;
+		 color: #000000;
+		 font-weight: 500;
+	}
+	.navbar-text.center{
+		text-align: center;
+	}
+	.navbar-text.left{
+		text-align: left;
+		padding-left: 45px;
+	}
+	.navbar-icon {
+		 position: fixed;
+		 display: flex;
+		 box-sizing: border-box;
+	}
+	.navbar-icon .iconfont {
+		 display: inline-block;
+		 overflow: hidden;
+		 font-size: 44rpx;
+		 padding-right:40rpx;
+		 margin-top: 1px;
+	}
+	.navbar-icon .icon-iconfonticonfontsousuo1 {
+		color: #000000;
+	}
+	.navbar-icon view {
+		 height: 18px;
+		 border-left: 0.5px solid rgba(0,0,0, 0.3);
+		 margin-top: 6px;
+	}
+	.navbar-loading {
+		 background: #fff;
+		 text-align: center;
+	}
+</style>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+