hlm_pl_mall_h5/pages/home/pointsgoods/DetailHeader.vue

<!-- DetailHeader.vue -->
<template>
  <view class="ui-detail-header-wrapper">
    <title-header />
    <view class="div ui-detail-header">
    	<text class="span iconfont" @click="goBack()">&#xe6ee;</text>
    	<view class="div navbar-wrapper">
    		<view class="div"
    			v-for="(item, key) in data"
    			:key="key"
    			v-bind:class="{ navbar_active: key == index }"
    			v-on:click="changeEvent(key)"
    		>
    			{{ item.name }}
    		</view>
    	</view>
    </view>
  </view>

</template>

<script>
  import TitleHeader from '../../TitleHeader'
import { urlencode } from '@/util/common'
import { header } from './static'
import { mapState, mapMutations } from 'vuex'
export default {
  data () {
    return {
      navHeight: 0,
      data: header
    }
  },
  components: {
    TitleHeader
  },
  mounted () {
    // #ifdef  MP-WEIXIN
    this.navHeight = uni.getMenuButtonBoundingClientRect().top
    // #endif
  },

  computed: {
    ...mapState({
      index: state => state.pointsgoods.index
    })
  },

  created () {},

  methods: {
    ...mapMutations({
      changeIndex: 'changeIndex'
    }),

    changeEvent (index) {
      this.changeIndex(index)
    },

    goBack () {
      uni.navigateBack({delta:1})
    }
  }
}
</script>

<style lang="scss">
  .ui-detail-header-wrapper{
	position: fixed;
	top: var(--status-bar-height);
	left: 0;
	right: 0;
  z-index: 10;
  }
.ui-detail-header {
	padding: 0 0.45rem;
	background: rgba(255, 255, 255, 1);
	color: #55595f;
	font-size:$h2;
	width: auto;
	display: flex;
	justify-content: center;
	align-content: center;
	align-items: center;
	flex-basis: auto;
	.iconfont {
		width: 1.2rem;
		font-size:$h2;
		height: $headerHeight;
		line-height:$headerHeight;
		cursor: pointer;
		position: absolute;
		left: 0.45rem;
		bottom: 0;
	}
	.div.navbar-wrapper {
		line-height: $headerHeight;
		height: $headerHeight;
		.div {
			// line-height: 2.1rem;
			border-bottom: 0;
			display: inline-block;
			margin-right:2.4rem;
			color: #55595f;
			background-color: #fff;
			position: relative;
			&.navbar_active {
				color: $primaryColor;
				&::after{content:'';display: block;height: .1rem;width: 1rem;position: absolute;bottom:0;left:50%;margin-left:-.5rem;background: $primaryColor}
			}
			&:last-child {
				margin-right: 0;
			}
			&:focus {
				outline: none;
			}
		}
	}
}
</style>