跨平台应用开发进阶 (十九) ：position:fixed 虚拟按键触发后无法生效问题分析及解决方案探究
一、前言
uni-app项目开发过程中，发现虚拟按键触发后导致按钮被顶起，并不满足业务需求。
经检查样式，发现按钮设置的定位方式为固定定位。难道固定定位在此处并未生效？
二、原因分析及解决措施
出现以上问题的原因是由于虚拟按键弹出时，CSS设置的样式未生效，需要在检测虚拟按键弹出时动态设置按钮样式。
解决思路如下：通过监听虚拟键盘的展示收起，动态控制按钮布局。
首先，初始化数据信息如下：
视图渲染部分，应用动态样式设置按钮布局：
虚拟按键监听逻辑如下：
CSS样式如下：
三、延伸阅读 uni-app 版本检查弹窗去除
出现原因：手机端SDK版本和HBuilderX版本不一致。
解决办法
在项目中找到
manifest.json配置文件；点击源码视图；
找到
app-plus配置节点；找到下面的
compatible字段（没有则添加）,添加一段忽略提示的代码
完整配置如下：
四、拓展阅读
五、 延伸阅读 uni-data-checkbox 组件实现自定义样式及注意事项
uni-app 项目开发过程中，需要实现单选同意用户协议效果，但是交互方式采用多选，即点击-选中，点击-取消效果。
更改的时候需要注意以下几点：
因为 uni-app 默认组件是定义好了的，如果要修改可以找到组件所属 css，也可以自行修改样式并覆盖原有样式。
选择自行修改的时候，一定在 app.vue 页面去引入更改的 css 或者直接在此页面进行修改，否则修改无效。
不要在 style 中增加
scoped属性。注意小程序中跟 h5 页面是略有不同的，如下官方语句
关于第 3 点，“ 不要在 style 中增加 scoped 属性 ”尤为不解，本页面的样式控制本页面渲染视图样式，却不能使用 scoped，存在污染其他页面样式的风险。
CSS 实现逻辑如下：
上面说到关于注意到的第 3 点，“ 不要在style中增加scoped属性 ”存在污染其他页面样式的风险，所以在控制CSS样式的时候，根据样式作用范围，只将需要用到的样式控制为全局样式，其余样式做scoped处理，最大化减少样式污染的风险。
版权声明: 本文为 InfoQ 作者【No Silver Bullet】的原创文章。
原文链接:【http://xie.infoq.cn/article/5489b63709747b80fbdae68d6】。文章转载请联系作者。
No Silver Bullet 2021-07-09 加入
岂曰无衣 与子同袍
评论