头部有输入框,聚焦后固定定位失效,排版混乱
解决方法:
头部用绝对定位,中间内容部分设置高100%,给上padding,然后加上overflow:scroll让中间部分可以滚动,
注意:要看所有父盒子高度是否是100%
.top{
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 999;
}
.middle{
height: 100%;
padding-top: 104px;
overflow: scroll;
}
input上传文件
问题:当有图片或者其他内容绑定到input上时ios点击触发不了上传文件的事件。
最初我的解决办法:
给绑定的label标签加边框,然后在中间加一个加号的图标,点击时一般点击不到图标,这样也能触发事件
结构
<label for="fileupload" class="picture-label">
<i class="iconfont icon-tianjia"></i>
</label>
<form name="imgForm" id="imgForm">
<input @change='addImg($event)' type="file" accept="image/*" id="fileupload" name="file" style="display:none">
</form>
样式
.picture-label {
display: inline-block;
width: 1.6rem;
height: 1.6rem;
line-height: 1.6rem;
margin-top: 0.14rem;
text-align: center;
color: #999;
border: 2px dashed #ccc;
border-radius: 0.2rem;
}
最终解决办法:背景图
结构
<label for="fileupload" class="fl picture-label">
</label>
<form name="imgForm" id="imgForm">
<input @change='addImg($event)' type="file" accept="image/*" id="fileupload" name="file" multiple style="display:none">
</form>
样式
.picture-label {
width: 1rem;
height: 1rem;
background-image: url(../assets/plus_side.png);
background-size: 1rem;
}