持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第7天，点击查看活动详情
前言
最近在开发h5应用，开发过程中踩的坑是真多，今天又遇到不少，什么页面的滚动了，页面的变形了，下面做下记录，以免再遇到，也分享给大家。
h5开发中用的调试方法
我基本上用到了两种：
- 第一种就是借助chrome浏览器，具体操作是通过数据线连接手机，在浏览器中打开如下地址：
chrome://inspect/#devices
然后在手机上打开开发者模式和允许usb调试即可。
之后用手机在浏览器打开h5地址，就可以在chrome浏览器中点击inspect来同步查看，这里可以看到你在浏览器的操作，并且可以打开控制台看console.log等报错信息。
- 第二种是更简单好用的方法，那就是vconsole，可以通过cdn引入，也可以通过npm来引入，这里以npm引入为例
npm install vconsole
然后在main.js引入使用就可以了
import VConsole from 'vconsole';
//这里由于我们测试也要用我就没做限制，正常情况下就开发使用可以加个判断，if(development)
new VConsole();
这里提一嘴，如果想在js中使用路由跳转只需把router引入js页面就可以通过router.push('***')使用了
h5中溢出滚动不能使用的情况
我这里用的技术框架是vue+vant，我项目中遇到的问题是van-overlay中的溢出滚动不生效，这里的不生效是指移动端，在电脑浏览器上是正常的，这里只需给van-overlay标签加上一个属性就可以了，如下
<van-overlay :lock-scroll="false" :show="show" @click="show = false" />
h5中点击输入框会把内容顶上去的问题解决
引起这个问题的原因是底部的tab是父元素中通过绝对定位定在屏幕下方的，当软键盘弹出来的时候改变了实时屏幕的高度，所以会把tab顶上去，就会影响其它内容的布局，这里我们只要当页面出现软键盘时把tab隐藏即可，收起键盘时再放出tab，具体代码如下：还是已vue为例
<template>
<div>
<van-tabbar v-show="hidOrShow" fixed route v-model="active" @change="handleChange">
<van-tabbar-item v-for="(item, index) in data" :to="item.to" :key="index">
<span class="tab-name">{{ item.title}}</span>
<template #icon="props">
<img :src="props.active ? item.icon.inactive: item.icon.active" />
</template>
</van-tabbar-item>
</van-tabbar>
</div>
</template>
<script>
export default {
name: 'TabBar',
props: {
defaultActive: {
type: Number,
default: 0
},
data: {
type: Array,
default: () => {
return []
}
}
},
data() {
return {
active: this.defaultActive,
docmHeight: document.documentElement.clientHeight, // 这里表示屏幕的高度
realTimeHeight: document.documentElement.clientHeight, // 这里是实时屏幕高度，当软键盘出来时它会改变
hidOrShow: true // 显示或者隐藏tab
}
},
watch: {
realTimeHeight(val) {
if (this.docmHeight > val) {
this.hidOrShow = false
} else {
this.hidOrShow = true
}
}
},
mounted() {
window.onresize = () => {
return (() => {
this.realTimeHeight = document.body.clientHeight
})()
}
},
methods: {
handleChange(value) {
this.$emit('change', value)
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.tab-name{
/* font-size: 10px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; */
color: #141A1B;
}
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
总结
h5开发移动端还是会遇到很多问题的，继续干，gogogo
