vue 移动端项目，动态控制div距离底部的距离

<template>
	<div class="details">
		<com-nav-bar title="保险详情">
			<i class="iconfont icon-xiangzuo" slot="left"></i>
		</com-nav-bar>
		<div class="details-scroll-wrapper" ref="scrollWrapper" :style="{bottom:bottom + 'px'}">   //动态添加样式
			<div class="details-scroll-inner" :style="{paddingBottom:paddingBottom + 'px'}">
				<div :class="[productInfo.tips?'cate':'cates']">
					<span>{{productInfo.tips}}</span>
				</div>
				</div>
			</div>
		</div>
		<div class="btn-bottom" ref="btnDetails">  //先算出这个的高度（因为这个高度不是固定的，所以需要让上面的div距离底部的就需要是动态计算出来）
			<div class="btn-info">
				<div style="display:flex;">
					<div style="min-width:95px;margin-top:4px;">
						<span class="agree" @click="choos"><i class="iconfont " :class="{'icon-weixuanzhong':!checked,'icon-xuanzhong1':checked}"></i>我已阅读：</span>
					</div>
					<div>
						<span class="links" v-for="item in linksData" @click='goDetails(item.key,item.title,productInfo.id)'>《{{item.title}}》</span>
					</div>
				</div>
			</div>
			<div class="btn">
				<button>{{productInfo.premium}}</button>
				<button @click="goInsure(productInfo.code)">立即投保</button>
			</div>
		</div>
	</div>
</template>

<script>
	import BScroll from 'better-scroll'
	import urls from '@/api/urls'

	export default {
		data() {
			return {
				paddingBottom: 0,
				bottom:0,
			}
		},
		created() {
			this.id = this.$route.query.id
			this.getInfo()
			this.$store.dispatch("setpayData", {});
			this.$store.dispatch('setorderData', {});
		},
		methods: {
			// 获取产品详情
			getInfo() {
				this.$loadingStart()
				this.$http(urls.productInfo, {
						productCode: this.id,
					})
					.then(res => {
						let that = this
						this.$nextTick(() => {
							this.tabTop = this.$refs.tabHeader.offsetTop
							this.paddingBottom = this.$refs.scrollWrapper.clientHeight -
								parseInt(getComputedStyle(this.$refs.sectionWrapper).paddingTop) -
								this.$refs.tabHeader.clientHeight -
								this.$refs.evaluate.clientHeight
							let sall = document.querySelectorAll("div.introduce span.info img");
							for(let i = 0, len = sall.length; i < len; i++) {
								let interval = setInterval(function() {
									if(sall[i].clientHeight != 0) {
										that.scroll.refresh()
										clearInterval(interval)
									}
								}, 100)
								// sall[i].onload = function() {
								// 	that.scroll.refresh()
								// }
							}
							this.bottom=this.$refs.btnDetails.clientHeight  //在这里获取到底部的高度，然后赋值到bottom
							 console.log(this.$refs.btnDetails.clientHeight);
						})

					})
					.catch(err => {
						this.$loadingEnd()
						this.$errorHandler(err)
					})
			}
		},
		mounted() {
			this.scroll = new BScroll(this.$refs.scrollWrapper, {
				click: true,
				probeType: 3,
				pullUpLoad: {
					threshold: 60,
				},
			})
			this.scroll.on('scroll', pos => {
				const {
					y
				} = pos

				const scrollY = -y
				// 锚点实时切换
				const evaluateTop =
					this.$refs.evaluate.offsetTop -
					this.$refs.tabHeader.clientHeight -
					parseInt(getComputedStyle(this.$refs.sectionWrapper).paddingTop)

				const buyTop =
					this.$refs.buy.offsetTop -
					this.$refs.tabHeader.clientHeight -
					parseInt(getComputedStyle(this.$refs.sectionWrapper).paddingTop)
				this.showTop = scrollY > this.tabTop
				if(scrollY >= evaluateTop) {
					this.active = 2
				} else if(scrollY >= buyTop) {
					this.active = 1
				} else {
					this.active = 0
				}
			})
		},
		beforeDestroy() {
			this.scroll.destroy();
		}
	}
</script>

<style scoped lang="less" rel="stylesheet/less">
	
</style>