hlm_pl_mall_h5/pages/home/goodsdetail/child/ProductDesc.vue

<template>
	<view class="div ui-detail" id="mbBody" ref="mbBody">
		<view class="title"><text class="border"></text><text class="titleinfo">宝贝详情</text><text class="border"></text></view>
		<view class="div">
			<desc-item
				:mbBody="mbBody"
				:detailInfo="detailInfo"
				v-if="detailInfo"
			></desc-item>
		</view>
		<v-back-top v-if="isshowBacktop" :target="target"></v-back-top>
	</view>
</template>

<script>
import { mapState } from 'vuex'
import DescItem from './DescItem'
import BackTop from './DetailBackTop'
export default {
  data () {
    return {
      isshowBacktop: false
    }
  },

  mounted () {
   addEventListener('scroll', this.handleScroll, true)  
  },

  components: {
    'desc-item': DescItem,
    'v-back-top': BackTop
  },

  computed: mapState({
    detailInfo: state => state.goodsdetail.detailInfo,
    mbBody: state => state.goodsdetail.mbBody
  }),

  methods: {
	  handleScroll() {
		  let mbBodytop = 0
		  let query = uni.createSelectorQuery().in(this)
		  query.select('#mbBody').boundingClientRect(data =>{
		  	mbBodytop = data.top
		  }).exec();
		this.$emit('mbBodytop',mbBodytop);
	  },
  }
}
</script>

<style lang="scss" scoped>
.ui-detail {
	margin: .5rem 0;
	min-height: 10rem;
	position: relative;
	.title{
		font-size: .8rem;
		text-align: center;
		padding: 0.3rem 0;
		display: flex;
		align-items: center;
		justify-content: center;
		.border{
			width: 3rem;
			height: 1px;
			background-color: #eee;
			margin: 0 .5rem;
		}
	}
}
</style>