最后
由于篇幅限制,pdf文档的详解资料太全面,细节内容实在太多啦,所以只把部分知识点截图出来粗略的介绍,每个小节点里面都有更细化的内容!
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
文章目录
一、前言
uni-app
项目开发过程中,发现虚拟按键触发后导致按钮被顶起,并不满足业务需求。
经检查样式,发现按钮设置的定位方式为固定定位。难道固定定位在此处并未生效?
.footer {
position: fixed;
width: 100%;
bottom: 0;
height: 120rpx;
justify-content: center;
align-items: center;
border-top: 1rpx solid #F0F0F0;
background: #ffffff;
}
二、原因分析及解决措施
出现以上问题的原因是由于虚拟按键弹出时,CSS
设置的样式未生效,需要在检测虚拟按键弹出时动态设置按钮样式。
解决思路如下:通过监听虚拟键盘的展示收起,动态控制按钮布局。
首先,初始化数据信息如下:
hideFlag: true,
hideClass: 'hide'
视图渲染部分,应用动态样式设置按钮布局:
<view class="footer" :class="hideFlag ? hideClass : ''">
<view @click="btnClick" class="btn" :class="{'btn-disable': btnDisabled}">提交</view>
</view>
虚拟按键监听逻辑如下:
onLoad() {
uni.onKeyboardHeightChange(res => {
// 虚拟按键隐藏
if (res.height === 0) {
this.hideFlag = true;
} else {
// 虚拟按键弹出
this.hideFlag = false;
}
})
},
#### 总结一下
面试前要精心做好准备,简历上写的知识点和原理都需要准备好,项目上多想想难点和亮点,这是面试时能和别人不一样的地方。
还有就是表现出自己的谦虚好学,以及对于未来持续进阶的规划,企业招人更偏爱稳定的人。
万事开头难,但是程序员这一条路坚持几年后发展空间还是非常大的,一切重在坚持。
**[开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**
为了帮助大家更好更高效的准备面试,特别整理了《前端工程师面试手册》电子稿文件。
![](https://img-blog.csdnimg.cn/img_convert/621960a57eb42479e02d6d64c0c81891.png)
![](https://img-blog.csdnimg.cn/img_convert/5230c48fd0fcb265f3401a21603bda2b.png)
**前端面试题汇总**
![](https://img-blog.csdnimg.cn/img_convert/42728594459506983a38ca2b86545fc6.png)
5f3401a21603bda2b.png)
**前端面试题汇总**
![](https://img-blog.csdnimg.cn/img_convert/42728594459506983a38ca2b86545fc6.png)