dcloudio / dcloudio/uni-app

swiper-item中使用弹窗导致fixed异常 (vue3 + vite + cli创建工程)

Open
#4,033 8 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
41.6k
Forks
3.7k
Avg merge
7h 6m
Merged PRs (30d)
6

Description

**问题描述**
swiper-item中使用弹窗导致fixed异常, 场景是一个列表页面, swiper中会弹出一些弹窗(uni-popup), 这些弹窗大概都是fixed布局的, 由于fixed限制, 如果父组件使用了transform等css样式, 那么fixed不会相对窗口布局, 而会相对父组件布局.

相关问题在dcloud有解决方案, 大多数都是通过renderjs, 将fix的代码添加到body中, 随即我就写出了这样的代码:

```html

export default {
name: "collect",
mounted() {
console.log('uniPopupFixed mounted')
},
}

```

经过安卓真机编译, 发现hbx爆了一个错误, 情况不明:

```
16:24:06.527 Uncaught TypeError: nm(...).setAttr is not a function at uni-app-view.umd.js:1
```

随即我寻思用vue3的新特性去解决问题

```

```
在app端也是运行不成功, 因为uniapp目前还不支持

我想问问目前有没有比较好的方案去解决我的问题, 思路就是把一部分的dom转移到swiper中渲染

**复现步骤**
[复现问题的步骤]
1. 启动 '...'
2. 点击 '....'
3. 查看

[或者可以直接贴源代码]

**预期结果**
[使用简洁清晰的语言描述你希望生效的预期结果]

**实际结果**
[这里请贴上你的报错截图或文字]

**系统信息:**
- 发行平台: [如 微信小程序、H5平台、5+ App等]
- 操作系统 [如 iOS 12.1.2、Android 7.0]
- HBuilderX版本 [如使用HBuilderX,则需提供 HBuilderX 版本号]
- uni-app版本 [如使用Vue-cli创建/运行项目,则提供`npm run info`的运行结果]
- 设备信息 [如 iPhone8 Plus]

**补充信息**
[可选]
[根据你的分析,出现这个问题的原因可能在哪里?]

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.