这段时间公司在做一个秀场直播类的APP，公司人手有限，把我这个做后端的叫去支援他们移动端，让我用这渣渣技术帮他们做几个H5界面，原生嵌入进去！害！！！这不是抢人家饭碗么，还是被后端抢的！

刚开始我还觉得是没什么问题，毕竟也是做web出身的html、css、js底子还是有的，而且还能耍的一手VUE、Uniapp，自然没把这10来个H5界面放在眼里，不知道哪来的技术自信（哈哈）刚开始准备用VUE写的，之前用VUE写过一个棋牌游戏，但是前段时间刚好用Uniapp写过一个独立项目，觉得坑挺多的，但是写几个屌界面还是够用的，谁知MMP一路坑还是有点多

言归正传咯!
原型图是这样的
实际效果

感觉还好吧！
界面样式到时没什么大问题，就是用户交互上面出现了问题！

整个蓝色部分是一个swiper+scroll-view的组件，而这个界面又是作为H5嵌入原生Android、IOS的WebView里面的，就造成了整个界面可以滚动和蓝色区域的scroll-view滚动，两层滚动，产品经理说用户体验不行，我就优化了一下！（这里底部的最后一项是当前用户自己的排名，需要固定在最底部）

上解决思路

1.将界面禁止滚动

<view class="box" @touchmove.stop.prevent>

2.获取可使用窗口宽度

	mounted() {
			let this_=this;
			uni.getSystemInfo({
			    success: function (res) {
					/* this_.model=res.model
					this_.pixelRatio=res.pixelRatio
					this_.windowWidth=res.windowWidth */
					this_.windowHeight=res.windowHeight
					/*this_.language=res.language
					this_.version=res.version
					this_.platform=res.platform
					this_.windowTop =res.windowTop 
					this_.windowBottom=res.windowBottom
					this_.statusBarHeight =res.statusBarHeight 
					this_.screenHeight =res.screenHeight */
			    }
			});
		},

3.获取不同高度屏幕的蓝色区域动态大小

这里可以使用步骤2获取到的使用窗口宽度-A-C那么就可以动态获取B区域的高度

computed:{
			h(){
				return this.windowHeight-70-240;
			}
		},

我这里的A区域高度是240px C区域的高度是70px是固定的，如果你们是活动的话可以使用下面代码动态获取！

动态获取容器属性

 		uni.getSystemInfo({
			  success: function (res) { // res - 各种参数
			    let obj = uni.createSelectorQuery().select('.top-box')
			    obj.boundingClientRect(function (data) { // data - 各种参数
			      console.log(data)
			    }).exec()
			  }
			}) 

然后这里补充一点关于IOS适配的小知识点，IOS状态栏44px、导航栏44px，底部安全区34px