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

sigwle7e 于 3个月前发布在 uni-app

关注(0)|答案(7)|浏览(46)

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

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

<script module="uniPopupFixed" lang="renderjs">
    export default {
        name: "collect",
        mounted() {
            console.log('uniPopupFixed mounted')
        },
    }
</script>

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

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

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

<Teleport></Teleport>

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

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

复现步骤
[复现问题的步骤]

启动 '...'
点击 '....'
查看

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

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

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

系统信息:

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

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

uni-app

来源：https://github.com/dcloudio/uni-app/issues/4033

7条答案

按热度按时间

hsgswve41#

APP平台, 操作系统为mac m1 macbook air
hbx的版本: 3.6.10.20221121-alpha
uniapp版本:

"@dcloudio/uni-app": "3.0.0-alpha-3060120220907002",
    "@dcloudio/uni-app-plus": "3.0.0-alpha-3060120220907002",
    "@dcloudio/uni-components": "3.0.0-alpha-3060120220907002",
    "@dcloudio/uni-h5": "3.0.0-alpha-3060120220907002",
    "@dcloudio/uni-mp-alipay": "3.0.0-alpha-3060120220907002",
    "@dcloudio/uni-mp-baidu": "3.0.0-alpha-3060120220907002",
    "@dcloudio/uni-mp-kuaishou": "3.0.0-alpha-3060120220907002",
    "@dcloudio/uni-mp-lark": "3.0.0-alpha-3060120220907002",
    "@dcloudio/uni-mp-qq": "3.0.0-alpha-3060120220907002",
    "@dcloudio/uni-mp-toutiao": "3.0.0-alpha-3060120220907002",
    "@dcloudio/uni-mp-weixin": "3.0.0-alpha-3060120220907002",
    "@dcloudio/uni-quickapp-webview": "3.0.0-alpha-3060120220907002",
    "@dcloudio/uni-ui": "^1.4.15",

设备信息: 真机安卓

赞(0）回复(0）举报 3个月前

okxuctiv2#

renderjs相关代码我是写在了子组件中

赞(0）回复(0）举报 3个月前

vbopmzt13#

请参考我在这篇帖子中的回答: https://ask.dcloud.net.cn/question/140124

赞(0）回复(0）举报 3个月前

osh3o9ms4#

@qhhsy 但是我的renderjs代码报错, 只要写了export default就会报错
16:24:06.527 Uncaught TypeError: nm(...).setAttr is not a function at uni-app-view.umd.js:1

赞(0）回复(0）举报 3个月前

6vl6ewon5#