hlm_pl_mall_h5/pages/home/pointsgoods/DetailBody.vue

<!-- 商品详情  -->
<template>
	<view
		class="div ui-detail-swiper"
		v-bind:class="{
			'has-goods-stock': isStock <= 0
		}"
	>
  <view :style="'height:'+navHeight+'px'"></view>
		<product-info v-if="index == 0"></product-info>
		<product-desc v-if="index == 1"></product-desc>
		<product-review v-if="index == 2"></product-review>
	</view>
</template>

<script>
import ProductInfo from './child/ProductInfo'
import ProductDesc from './child/ProductDesc'
import ProductReview from './child/ProductReview'
import { mapState, mapMutations } from 'vuex'
export default {
	data() {
		return {
      navHeight:0
    }
	},

	props: ['isStock'],

	components: {
		ProductInfo,
		ProductDesc,
		ProductReview
	},

	computed: {
		...mapState({
			index: state => state.pointsgoods.index,
		})
	},
  mounted: function() {
    // #ifdef  MP-WEIXIN
    this.navHeight = uni.getMenuButtonBoundingClientRect().top
    // #endif
  },

}
</script>

<style lang="scss" scoped>
.ui-detail-swiper {
	position: absolute;
	width: 100%;
  box-sizing: border-box;
  padding-top:$headerHeight;
  padding-bottom:$footerHeight;
	top: var(--status-bar-height);
	bottom: constant(safe-area-inset-bottom);/*兼容 IOS<11.2*/bottom: env(safe-area-inset-bottom);/*兼容 IOS>11.2*/
	left: 0;
	right: 0;
	overflow: auto;
	z-index: 0;
	/* border: 1px solid red; */
	background: rgba(240, 242, 245, 1);
	&.has-goods-stock {
		bottom: 4.1rem;
	}

}
</style>