products/uni-shop/components/v-header/main.vue

<template>
  <view class="header_screen relative flex">

    <!-- 头部组件 -->
    <view
        :style="{
          'padding-top': statusBarHeight+'px',
          'height': (statusBarHeight + headerHeight)+'px',
          'background-color': headerBackgroundColor
        }"
        class="header_header flex-shrink-0"
        :class="[immersion ? 'absolute immersion-header':'relative',border?'header-border':'']"
    >
      <view class="absolute header-watch-scroll" :style="{background:transitionBackgroundColor,opacity: watchOpacity}" v-if="watchScroll"></view>
      <!-- 内容包裹 -->
      <view class="relative flex-1 flex row" >
        <!-- 左侧 -->
        <view class="relative header-left flex row">
          <block v-if="control">
            <view v-if="headerIcon[mode]" @click="goBack" class="header-back flex jCenter" :style="{height:headerHeight+'px'}">
              <image class="header-back-image" :src="headerIcon[mode][headerStyle]"></image>
            </view>
          </block>

          <slot name="header-left"></slot>

        </view>
        <view v-if="!alignCenter" @click="goBack"  class="header-title flex center" :style="{color:headerStyle==='black'?'#000':'#fff'}">
          <view v-if="state===1" class="header-load flat-load-animate" :style="{'border-color':headerStyle==='black'?'#000':'#fff'}"></view>
          <text v-else-if="state===3" @click="reload" class="header-fail relative" :class="['header-fail-'+headerStyle]">网络繁忙,点击重试</text>
          <text v-else>{{title}}</text>
        </view>
        <!--标题文字-->
        <view v-if="alignCenter" class="header-title-model absolute flex center">
          <view class="header-title flex center" :style="{color:headerStyle==='black'?'#000':'#fff'}">
            <view v-if="state===1" class="header-load flat-load-animate" :style="{'border-color':headerStyle==='black'?'#000':'#fff'}"></view>
            <text v-else-if="state===3" @click="reload" :class="['header-fail-'+headerStyle]" class="header-fail relative">网络繁忙,点击重试</text>
            <text v-else>{{title}}</text>
          </view>
        </view>
      </view>

    </view>

    <slot name="background"></slot>

    <!-- 其他位置 -->
    <view class="flex-1 flex relative" >
      <slot name="header-background"></slot>
      <view class="flex-all-1 overflow" :style="{'background-color':backgroundColor}">
        <view v-if="scroll"
              class="header-title-model absolute flex"
              :style="{'padding-top': (immersion&&immersionFixed?(statusBarHeight + headerHeight):0)+'px'}"
        >
          <scroll-view v-if="watchScroll" @scroll="watchScrollEvent" scroll-y class="header_screen">
            <slot></slot>
          </scroll-view>
          <scroll-view wx:else scroll-y class="header_screen">
            <slot></slot>
          </scroll-view>
        </view>
        <view v-else
              :style="{'padding-top': (immersion&&immersionFixed?(statusBarHeight + headerHeight):0)+'px'}"
              class="header-title-model absolute flex">
          <slot></slot>
        </view>
      </view>
    </view>

    <!-- 其他内容 -->
    <slot name="modal"></slot>
    <!-- 间距 -->
    <view v-if="phoneX&&mode==='back'" :style="{height:(footerHeight + vFooterHeight)+'px','background-color':backgroundColor}"></view>

  </view>

</template>

<script>
import mixins from './mixins';
import props from './props';
export default {
  name: "v-header",
  mixins,
  props
}
</script>

<style scoped lang="scss" src="./style.scss"></style>