6***@qq.com
6***@qq.com
  • 发布:2022-08-13 09:20
  • 更新:2024-05-07 17:13
  • 阅读:901

【报Bug】nvue页面动态切换容器position无效

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: App操作

HBuilderX类型: 正式

HBuilderX版本号: 3.4.18

手机系统: Android

手机系统版本号: Android 12

手机厂商: 小米

手机机型: 小米12x

页面类型: nvue

vue版本: vue2

打包方式: 云端

项目创建方式: HBuilderX

示例代码:
复制代码<view :class="positionSet">定位容器</view>  
<view @click="isScreen = !isScreen">切换定位</view>  
<view>{{ isScreen }}</view>  
data() {  
    return {  
        isScreen: false  
    }  
}  

computed: {  
    positionSet() {  
        return this.isScreen ? 'fixed_top' : 'relative_top'  
    }  
}  

<style>  
.fixed_top {  
    position: fixed;  
    top: 0,  
    left: 0,  
    right: 0  
}  
.relative_top {  
    potision: relative;  
    top: 120rpx;  
}  
</style>  

操作步骤:
复制代码<view :class="positionSet">定位容器</view>  
<view @click="isScreen = !isScreen">切换定位</view>  
<view>{{ isScreen }}</view>  
data() {  
    return {  
        isScreen: false  
    }  
}  

computed: {  
    positionSet() {  
        return this.isScreen ? 'fixed_top' : 'relative_top'  
    }  
}  

<style>  
.fixed_top {  
    position: fixed;  
    top: 0,  
    left: 0,  
    right: 0  
}  
.relative_top {  
    postision: relative;  
    top: 120rpx;  
}  
</style>  

预期结果:

切换class时,position属性改变

实际结果:

position属性未改变,其他属性(如top值)有改变

bug描述:

nvue页面有一个视频播放器容器,现在需求时想在播放时给他设成固定定位,暂停时恢复回相对定位。实际上position这个属性是没修改到,其他属性就修改到了

2022-08-13 09:20 负责人:无 分享
已邀请:
一顾倾人诚

一顾倾人诚

https://ask.dcloud.net.cn/question/147850
我也遇到了 反馈了 没解决 如果你解决了 请@ 我下

HelloWorld侠

HelloWorld侠

几年了官方没回应,只能用笨办法写两个一样的元素一个fixed一个正常用v-if控制显隐

9***@qq.com

9***@qq.com

一样遇到了。。。

要回复问题请先登录注册

  • 标题 / 粗斜体
  • 代码片段
  • 超链接 / 图片 / 视频
  • 列表 / 引用

文章内容较多时,可以用标题分段 :

## 大标题 
### 小标题

斜体 / 粗体 :

**粗体** 
*斜体*
***粗斜体***

代码片段 :

``` javascript
代码片段
```

超链接 :

[链接文字](链接地址) 例: [百度](http://www.baidu.com)

图片 :

![图片说明](图片地址) 例: ![百度logo](http://www.baidu.com/img/bdlogo.gif)

视频 :

!![视频说明](视频地址) 例: !![优酷视频](http://youku.com)

有序列表 :

1. 123
2. 123
3. 123

无序列表 :

- 123
- 123
- 123

引用 : ( 双回车后结束引用 )

> 引用内容
引用内容
引用内容