hlm_pl_mall_h5/pages/home/goodsdetail/DetailBody.vue

<!-- 商品详情  -->
<template>
	<view
		class="div ui-detail-swiper"
		v-bind:class="{
			'hide-promotion-bottom': ispromotion,
			'has-goods-stock': isStock <= 0
		}"
	>
  <view :style="'height:'+navHeight+'px'"></view>
		<product-info v-if="index == 0" @mbBodyposition="mbBodyposition" @reviewposition="reviewposition"></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.goodsdetail.index,
      ispromotion: state => state.goodsdetail.ispromotion
    })
  },

  watch: {},

  mounted: function() {
    // #ifdef  MP-WEIXIN
    this.navHeight = uni.getMenuButtonBoundingClientRect().height
    // #endif
  },

  created () {},

  methods: {
    ...mapMutations({}),
	mbBodyposition:function(top){
		this.$emit('mbBodyposition',top);
	},
	reviewposition:function(top){
		this.$emit('reviewposition',top);
	}
  }
}
</script>

<style lang="scss" scoped>
.ui-detail-swiper {
	position: absolute;
	-webkit-overflow-scrolling: touch;
	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;

	&.hide-promotion-bottom {
		bottom: 0;
	}
}
</style>