uniapp uview组件u-popup嵌套问题

最新推荐文章于 2024-08-16 15:10:38 发布
最新推荐文章于 2024-08-16 15:10:38 发布
阅读量5.7k 收藏 3
点赞数 1
分类专栏： 学习笔记 文章标签： uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/carbinechun/article/details/120866133
版权

当u-popup中的内容较多，需要滚动查看，同时u-popup中有u-select或者其他的弹出层的时候，这个弹出层的固定位置会因为u-popup的滚动而变化

问题原因：u-popup内嵌套了scroll-view组件，这个组件的transform属性，导致该组件内部的子元素的position:fixed都失效了

解决办法：在popup展示后去除scroll-view的transform属性就可以了.

直接在u-popup组件外面包裹了一层view，设置一个class，比如:

​​​​​​​

 

carbinechun
关注
专栏目录
uni-app开发popup弹出层的二级嵌套使用和修改popup默认样式
WhyBecause的博客
08-01 1万+
一、popup的使用（可参考uni-app开发文档） <template> <view class="content"> <button @tap="startOpen">打开弹窗按钮</button> </view> <!-- 第一个弹窗 --> <uni-popup ref="...
up-popup 弹出层组件安卓正常显示，ios显示不了的问题
cqy657675321的博客
06-14 307
先说结论:苹果版(含APP-PLUS/微信小程序)的。右下角的两个按钮在ios上不能正常显示，在。等等定位效果穿透.(
【uniapp/uview1.x】解决在 u-popup 弹出层中使用 u-calendar 日历组件弹出方向出 bug 的问题
最新发布
花间半盘棋
08-16 342
如果这个方法不适用可能是 uview 版本不一样，可以参考：https://github.com/dcloudio/uni-ui/issues/915 试试看。所以日历的弹出层方向也跟随了 top，显然是不对的，所以需要修改 u-popup 的 css 样式；就是需要额外注意一下，固定在底部的重置和查询按钮，样式不要给。因为我为 popup 设置的方向为。
uni-popup弹窗层级问题
LiuxiaoXue_2018的博客
09-09 4438
uni-popup层级
【bug】u-popup里套u-action-sheet，同时出现时两层遮罩层叠加在底层（第二层遮罩层无效果，第一层遮罩层颜色变深）
m0_66340074的博客
10-10 877
可以在u-popup里添加zIndex="10070"属性（参考uview官方文档），降低第一层的遮罩层层级，此时遮罩层可分别作用于两个弹出框。在项目中偶尔会出现u-popup里套u-action-sheet，同时出现时两个遮罩层都叠加在u-popup里的情况，
uview组件的popup弹出层下页面可以滚动，阻止popup弹层的touchmove事件
m0_72929120的博客
04-16 469
【代码】uview组件的popup弹出层下页面可以滚动，阻止popup弹层的touchmove事件。
uview Popup 弹出层嵌套使用Upload 上传图片预览问题层级问题解决。
zhangbin0103的专栏
05-31 667
uview Popup 弹出层嵌套使用Upload 上传图片预览问题层级问题解决。由于Popup 弹出层x-index层级较高，所以预览在弹出层下面。
uniapp使用自定义组件不显示自定义组件内容，不报错
qiuyushuofeng的专栏
06-21 2879
自定义组件向后台发送请求，没有触发函数
uniapp uni-popup弹出层组件 弹窗 无法弹出 自定义样式问题
睡不醒的博客
09-02 8483
uni-popup弹出层组件 之前用到弹出层组件时发现弹出时会有一层灰色的遮罩，后来调试了几次发现是因为没有自定义给弹出层宽高，尝试了几次终于做到自己想要的效果，话不多说，直接附上完整代码： 效果图： <template> <view> <view class="sign_text" @tap="toggle('center')"> <text style="line-height: 60px;margin-top: 12px;">点击弹出&lt
uni-app在scroll-view中使用popup、fixed，视图会随着页面滚动
weixin_43447086的博客
01-02 796
如果要在scroll-view中做下拉刷新就不要有fixed的元素，如果要有下拉刷新，就用页面滚动刷新onPullDownRefresh。这是CSS3的特性，position:fixed 会被transform副作用降级为absolute。
uniapp中（swiper）和（scroll-view）+（uni-popup）合并使用
babyxuqian的博客
11-11 1345
效果图 代码块 <template> <view class="hand"> <scroll-view class="scroll-view" scroll-x="true"> <view class="scollInfo"> <view class="dataList" v-for="(item,index) in scolList" :key='item.characterId'> <image..
uniapp uView u-picker组件三级联动Demo
02-12
- 1、分2个入口：一个添加，一个编辑（编辑涉及到数据回显） - 2、添加的时候，展示的数据是默认的，是上一列第一行数据的详情（所有的年级（第一列），一年级对应的班（第二列），一班对应的学生（第三列）） ...
【无标题】uniapp+ uview+u-popup弹出层 清除内部滚动
Yy986956491的博客
11-05 706
uniapp+uview+u-popup弹出层 清除内部滚动
uniapp uview实现u-popup左侧弹起时铺满屏幕
高桥留de博客
12-12 1465
uniapp uview实现u-popup左侧弹起起时铺满屏幕
uniapp结合uview-ui创建项目关键步骤一步一图教程
qq_36305027的博客
08-01 801
​ uView是uni-app生态专用的UI框架，uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码， 可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台(引言自uni-app网)。但目前除微信小程序，其它小程序平台的兼容可能存在一些问题，后续会针对这方面持续优化。
uView 弹出层组件使用，u-popup、u-modal同时使用，弹出层看不见
m0_57087617的博客
05-14 545
组件不显示
vux popup组件在ios上遮罩层挡住了弹窗
qq_39471778的博客
04-17 1416
vux popup组件在ios上遮罩层挡住了弹窗 移动端在使用vux框架中popup组件时，安卓上正常，ios上遮罩层挡住弹窗，这是因为滚动元素和mask遮罩层在同一级，vux框架默认把遮罩层放在body标签下，有些人说更改源码，但是改了源码从新打包时会npm所有依赖，所以生产环境不会生效 解决办法 引入 把popup放在这个指令里面 ...
uniapp中使用u-popup组件导致的弹框下面的页面可滑动现象
edwardwzw的博客
03-29 850
【代码】uniapp中使用u-popup组件导致的弹框下面的页面可滑动现象。
uniapp 引用组件后 不起作用 无效果 不显示
wangjun5159的专栏
04-23 2192
只要组件安装在项目的components目录下或uni_modules目录下，并符合components/组件名称/组件名称.(vue|uvue)目录结构（注意：当同时存在vue和uvue时，uni-app。就可以不用引用、注册，直接在页面中使用。但有时引入一个组件后，不起作用、无效果，不显示，这很有可能是关联组件与目标组件版本不协调导致，建议。比如要使用uni-list组件，那么打开组件文档首页，点击下载安装。我就是在升级了一个组件后，不显示，将全部组件升级后就好了。，选择目标项目完成导入。
uniapp 使用uview u-navbar
05-10
如果你想在 uniapp 中使用 uview 中的 u-navbar 组件，可以按照以下步骤进行操作： 1. 首先，你需要在 uniapp 项目中引入 uview 组件库，方法可以参考官方文档：https://www.uviewui.com/guide/quickstart.html#%e5%bc%95%e5%85%a5%e7%bb%84%e4%bb%b6%e5%ba%93。 2. 接下来，在需要使用 u-navbar 的页面中，你需要在页面的 json 文件中，将 u-navbar 组件注册为自定义组件，方法如下： ``` { "usingComponents": { "u-navbar": "uview-ui/components/u-navbar/u-navbar" } } ``` 3. 在页面的 wxml 文件中，你可以像使用其他组件一样，使用 u-navbar 组件了，如下所示： ``` <u-navbar title="首页"> <!-- 这里可以放 u-navbar 的 slot 内容 --> </u-navbar> ``` 4. u-navbar 组件还有很多可选的属性，可以根据实际需求进行配置，具体可参考官方文档：https://www.uviewui.com/components/navbar.html。 以上就是在 uniapp 中使用 uview 的 u-navbar 组件的基本步骤。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值