<template>
<view style="">
<view style="height: 200px;"></view>
<swiper :style="{'height':talkInfoHeight + 'px'}" class="swiper-box" :current = "tabIdx" :indicator-dots="indicatorDots" :autoplay="false" :interval="interval" :duration="duration" >
<swiper-item>
<view class="swiper-item" @click="toCancel">
<text>swiper内popup</text>
</view>
<!-- 普通弹窗 -->
<uni-popup ref="popup" background-color="#fff" @change="change">
<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }"><text
class="text">popup 内容</text></view>
</uni-popup>
</swiper-item>
<swiper-item>
<view class="swiper-item">
<text>2</text>
</view>
</swiper-item>
<swiper-item>
<view class="swiper-item">
<text>3</text>
</view>
</swiper-item>
</swiper>
<view>
<view>
<text @click="toCancel2">非swiper内popup</text>
<uni-popup ref="popup1" background-color="#fff" @change="change">
<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }"><text
class="text">popup 内容</text></view>
</uni-popup>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
type: 'center',
talkInfoHeight:200,
topBarHeight:0,
indicatorDots: false,
autoplay: true,
interval: 2000,
duration: 500,
tabIdx:0,
}
},
onLoad(option) {
},
methods: {
change(e) {
console.log('当前模式：' + e.type + ',状态：' + e.show);
},
toCancel(e){
this.$refs.popup.open('bottom')
},
toCancel2(e){
this.$refs.popup1.open('bottom')
},
}
}
</script>
咳
- 发布：2022-02-19 21:17
- 更新：2022-02-19 22:20
- 阅读：736
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： 设备名称 DESKTOP-O8KRVCG 处理器 11th Gen Intel(R) Core(TM) i5-1135G7 @ 2.40GHz 2.42 GHz 机带 RAM 16.0 GB (15.8 GB 可用) 设备 ID 203ED2D7-5A18-4349-92D5-A7818D0157BB 产品 ID 00342-36327-00835-AAOEM 系统类型 64 位操作系统, 基于 x64 的处理器 笔和触控 没有可用于此显示器的笔或触控输入
HBuilderX类型： 正式
HBuilderX版本号： 3.3.10
手机系统： Android
手机系统版本号： Android 11
手机厂商： 小米
手机机型： Redmi Note 9 Pro
页面类型： vue
vue版本： vue2
打包方式： 云端
项目创建方式： HBuilderX
示例代码：
操作步骤：
上述代码存成vue页面，项目引入uni-popup组件。分别点击 swiper内popup 和 非swiper内popup 就能看到差异。
上述代码存成vue页面，项目引入uni-popup组件。分别点击 swiper内popup 和 非swiper内popup 就能看到差异。
预期结果：
期望即使uni-popup放在swiper内，也能整页全屏。
期望即使uni-popup放在swiper内，也能整页全屏。
实际结果：
实际上uni-popup只能显示在swiper内。
实际上uni-popup只能显示在swiper内。
bug描述：
swiper和uni-popup冲突？uni-popup在swiper-item内的话，不是全屏，而是只显示在swiper组件内。uni-popup不放在swiper内就正常。
为什么非要放在swiper内呢？实际上我是在一个自定义组件内弹出uni-popup。所以，uni-popup肯定是在swiper内。演示代码只是简化了一点。但也能说明问题。
咳 (作者)
额，问题简化一下就是swipter内放置
···
<view style="position: fixed;left: 0;top:0;right: 0;bottom:0;background-color: #007AFF;">
<text>swiper内的fixed</text>
</view>
···
只能对于swiper全屏，不能整页全屏。
完整代码：
<template>
<view style="">
<view style="height: 100px;"></view>
<swiper :style="{'height':talkInfoHeight + 'px'}" class="swiper-box" :current = "tabIdx" :indicator-dots="indicatorDots" :autoplay="false" :interval="interval" :duration="duration" >
<swiper-item>
<view class="swiper-item" @click="toCancel">
</view>
<view style="position: fixed;left: 0;top:0;right: 0;bottom:0;background-color: #007AFF;">
<text>swiper内的fixed</text>
</view>
</swiper-item>
<swiper-item>
<view class="swiper-item">
<text>2</text>
</view>
</swiper-item>
<swiper-item>
<view class="swiper-item">
<text>3</text>
</view>
</swiper-item>
</swiper>
<view>
<view>
<view style="position: fixed;left: 0;top:0;right: 0;bottom:0;background-color: rgba(255,0,0,0.5);display: flex;flex-direction: row;align-items: center;">
<text>swipter外的fixed</text>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
type: 'center',
talkInfoHeight:200,
topBarHeight:0,
indicatorDots: false,
autoplay: true,
interval: 2000,
duration: 500,
tabIdx:0,
}
},
onLoad(option) {
},
methods: {
change(e) {
console.log('当前模式：' + e.type + ',状态：' + e.show);
},
toCancel(e){
this.$refs.popup.open('bottom')
},
toCancel2(e){
this.$refs.popup1.open('bottom')
},
}
}
</script>
小枫叶 - 外包接单加v:wlmk1234567 注明来意
首先,如果这样中情况的话,说明弹出层的组件承接的父元素的大小,所以会出现这样的情况,建议首先看下源码, 另外一个,弹出层不应该全屏展示么,你放在swiper里面做什么
-
咳 (作者)
为什么非要放在swiper内呢？实际上我是在一个自定义组件内弹出uni-popup。所以，uni-popup肯定是在swiper内。演示代码只是简化了一点。但也能说明问题。
2022-02-19 22:14
-
-
-
咳 (作者)
好吧。。这个问题好像设计到了w3c组织的一个15年没有解决的bug，并且最后认为其不是bug而拒绝解决的bug。。。。
transform里面的fixed会被限制在tramsform元素内。。。。
