uniapp显示提示框背景变暗_uniapp样式问题归纳总结

绝地灬酷狼 2022-10-26 14:07 316阅读 0赞

1.头部导航栏下拉弹框

![20f4f30a0fc3d677cfa2b7a016efe3a6.png][]

单纯的下拉弹框，我们在很多组件中都可以找到，但是放在头部导航的位置组件不常见，期初我也借用很多组件的方式展示，均已失败告终，索性自己动手写了一个。

HTML部分

\{ \{value\}\}

【注】引入uniapp封装下拉弹框

![31a21f5b23434cca86b7afe6a7cab35a.png][]

JS部分

exportdefault\{

components: \{

wPicker

\},

data() \{return\{

value:'雨花街道',

array: \[\{

name:'雨花街道'\}, \{

name:'软件大道'\}, \{

name:'宏运大道'\}\],

defaultProps: \{

label:"name",

value:"index",

\},

methods: \{

showPicker(type) \{this.$refs\[type\].show();

\},

onConfirm(res, type) \{this.value =res.result;

console.log(res)

\},

navigateBack() \{

uni.navigateBack();

CSS部分

【注】工作中用的是scss预处理，会出现一些变量，将变量改成自己项目中的颜色即可，例：background: $bg-color-fff;  改为：background: \#fff;即可

.selectBox\{width:100%;height:128upx;background:$bg-color-fff;padding:40upx 28upx 0 28upx;display:flex;justify-content:center;position:fixed;top:0upx;z-index:9999;

\}.select\{display:flex;padding:16upx 28upx;

\}.sel-tit\{font-size:$fonts-16;

\}.sel-text\{height:60upx;line-height:60upx;padding:0 30upx;border-radius:60upx;background:$bg-color-2152BA;margin-left:20upx;color:$bg-color-fff;

\}.sel-text .u-icon\{color:$bg-color-fff;margin-left:16upx;font-size:$fonts-12;

重点来了！！！

这种方式对安卓、H5都没问题，但是iOS头部刘海屏会遮挡！

如何解决安卓和iOS兼容性问题？话不多说，直接上代码

@media only screen and (min-height: 812px)\{.selectBox\{

position:fixed;top:40upx;

\}.xmCont\{margin-top:188upx;

\}\}

媒体查询，根据高度做兼容性处理

![ebc1a287fc10322ef5acca0e36073ec6.png][]

min-height: 812px是由iPhoneX的高度决定的，当最小高度时812时将进入媒体查询。

【注】媒体查询需要放在css文件的最后，不然会被之前的css样式覆盖。

2.数字弹框验证

![125d9ce2af86bda0e7a4bae99e609961.png][]

思路：盒子最外层用背景图片，里面用数字和符号用相同大小的图片展示

HTML:

请在下面输入算式的答案

取消

确认

CSS:

/\*验证框\*/.yzView\{width:80%;height:400upx;background-color:\#fff;z-index:1000;border-radius:20upx;position:absolute;top:360upx;left:50%;margin-left:-40%;

\}.tips\{padding-top:40upx;text-align:center;font-size:16px;font-weight:bold;color:\#333;

\}.confirmView\{width:100%;display:flex;border-top:1px solid \#EBEBEB;position:absolute;bottom:0;

\}.confirmView view\{width:50%;text-align:center;height:100upx;line-height:100upx;font-size:17px;

\}.cancel\{color:\#666;

\}.confirm\{color:\#fa8b15;

\}.confirm\{border-left:1px solid \#EBEBEB;

\}.numView\{display:flex;justify-content:center;padding:70upx 0;

\}.num\{width:188upx;height:64upx;line-height:64upx;display:flex;align-items:center;background:url(~@/static/img/icon/numBg.png) no-repeat center center;background-size:188upx 64upx;

\}.num image\{width:40upx;height:40upx;vertical-align:middle;

\}.inputView\{width:154upx;height:64upx;margin-left:18upx;border:1px solid \#EBEBEB;

/\*验证框 end\*/

[20f4f30a0fc3d677cfa2b7a016efe3a6.png]: /images/20221024/61ddd3b3c0a24701a331e4246b790c4f.png
[31a21f5b23434cca86b7afe6a7cab35a.png]: /images/20221024/ba6179b772564baeb526d14904026fdf.png
[ebc1a287fc10322ef5acca0e36073ec6.png]: /images/20221024/75d6824fccc14496b226d008534276e8.png
[125d9ce2af86bda0e7a4bae99e609961.png]: /images/20221024/1510aeb1ebf84821b4442f656711e0a4.png