问题解决：移动端vh单位导致better-scroll滚动到底部时content有剩余

  在做一个vue商城项目时使用better-scroll遇到了无法完全滚动的问题，这里是项目的地址。http://124.70.150.189。

现象：用PC端的chrome调试时并没有任何问题，但用自己的手机时发现，首页点击一个商品，进入商品详情页后往下滚到底部时，底部最后两张图片的内容显示不全，有部分被遮挡。
问题如下图所示：
问题分析：
  我们都知道better-scroll的wrapper要有确定高度插件才能正常工作，我的wrapper当时在CSS中给定的宽度是：

height: calc(100% - 102px)

  因为我给了wrapper的父元素的高度是100vh，因此wrapper的高度是100vh - 102px，问题就出在这个vh的单位上。

  核心问题是移动浏览器（Chrome Safari QQ浏览器等）具有“帮助”功能，其中地址栏有时可见，有时隐藏，从而改变了视口的可见大小。 这些浏览器没有将100vh高度调整为视口高度变化时屏幕的可见部分，而是将100vh设置为浏览器的高度，并隐藏了地址栏。 结果是，当地址栏可见时，屏幕的底部将被切除，如下图所示：

解决方案：当详情页的dom加载完毕后，用Javascript获取屏幕的可视高度(innerHeight)，然后再给wrapper的父亲(因为wrapper的高度由其父亲的高度 - 102px计算得出)添加高度，一下是当时用到的代码：

// 这是wrapper的父元素
<div class="" id="detail" :style="{height:detailHeight}"><div>

data() {
	return {
		detailHeight:0
	}
},

methods:{
getViewHeight() {
      this.detailHeight = window.innerHeight + 'px'
    }
},

create(){
// 这里保证了执行getViewHeight()时，dom元素已经加载完成，否则即使获取高度，也无法给detail设置高度
 this.$nextTick(() => {
      this.getViewHeight()
    });
}