uni-app
uni-app copied to clipboard
swiper-item中使用弹窗导致fixed异常 (vue3 + vite + cli创建工程)
问题描述 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]
补充信息 [可选] [根据你的分析,出现这个问题的原因可能在哪里?]
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",
设备信息: 真机安卓
renderjs相关代码我是写在了子组件中
请参考我在这篇帖子中的回答:https://ask.dcloud.net.cn/question/140124
@qhhsy 但是我的renderjs代码报错, 只要写了export default就会报错 16:24:06.527 Uncaught TypeError: nm(...).setAttr is not a function at uni-app-view.umd.js:1
提供一个示例看看
提供一个示例看看
https://github.com/4chao/preset 这个就是, 跑一下
提供一个示例看看
https://github.com/4chao/preset 这个就是, 跑一下
老哥问题解决了嘛?我也遇到了这个问题,也uniapp+vue3+vite工程,想到把原生uni-popup弹窗抽离到父组件,但是对项目破坏性太大,老哥是什么办法解决的呢