guosen-ldt-mall/components/custom_bar.vue

<template>
  <view>
    <view :style="{ background: background }" class="custom-header-container">
      <view :style="{height:getStausBarHeight + 'px'}" class="custom-header-status-bar"></view>
      <view :class="{'ios-center': isIos }" class="custom-header-top-container">
        <view :style="{color: color}" :class="{isIos: isIos}" class="custom-back-btn iconfont" v-if="showBack" @tap="backTap">
			<image v-if="color!='#ffffff'" src="http://139.9.103.171:1888/img/image/ic_back_black.png" mode="widthFix" style="width: 20px;"></image>
			<image v-if="color=='#ffffff'" src="http://139.9.103.171:1888/img/image/ic_back_white.png" mode="widthFix" style="width: 20px;"></image>
		</view>
        <view :style="{color: color}" :class="[{'ios-center': isIos },{'android-left-30':!isIos&&!showBack},{'android-left-80':!isIos&&showBack}]" class="custom-header-title" >{{ title }}</view></view>
    </view>
    <view :style="{ height: getStausBarHeight + (isIos ? 45 : 48) + 'px' }" class="custom-header-height"></view>
  </view>
</template>
<script>
export default {
    props: {
      title:{
        type:String,
		default:''
	  },
      background: {
        type: String,
		default:'transparent'
      },
      color: {
        type: String,
		default:'#ffffff'
      },
      showBack: {
        type: Boolean,
		default:false
      },
    },
    computed: {
      getStausBarHeight() {
        try {
          const res = uni.getSystemInfoSync();
          return res.statusBarHeight;
        } catch(e) {}
      },
      isIos() {
        return uni.getSystemInfoSync().system.indexOf('iOS') > -1
      }
    },
    methods: {
      backTap() {
		uni.navigateBack({
			delta:1
		})
      }
    }
  }
</script>
<style scoped lang="scss">
	.custom-header-top-container {
		display:flex;
		flex-flow:row nowrap;
		justify-content:flex-start;
		width:100%;
		align-items:center;
		&.ios-center {
		 justify-content:center;
	  }
	}
	.custom-header-container {
		z-index:9;
		width:750upx;
		display:flex;
		flex-direction:column;
		align-items:center;
		position:fixed;
		top:0;
	}
	.custom-back-btn {
		height:48px;
		line-height:48px;
		width:40px;
		margin:0;
		padding:0;
		border-radius:0 !important;
		display:flex;
		align-items:center;
		justify-content:center;
		position:absolute;
		left:0upx;
		font-size:18px;
		border-radius:5px;
		font-weight:500;
		color:#FFFFFF;
		&:active {
		 background:#0D72DF;
	   }
	  &.isIos {
		line-height:45px;
		height:45px;
	 }
	}
	.custom-header-status-bar {
		width:100%;
		top:0;
		position:sticky;
		z-index:100;
	}
	.custom-header-title {
		height:48px;
		line-height:48px;
		font-size:16px;
		color:#FFFFFF;
		&.ios-center {
			margin-left: 0;
			line-height:45px;
			height:45px;
		}
		&.android-left-30{
			margin-left: 30upx;
		}
		&.android-left-80{
			margin-left: 80upx;
		}
			
	}
</style>