<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>
6***@qq.com
- 发布：2022-08-13 09:20
- 更新：2024-03-20 14:42
- 阅读：513
产品分类： 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 {
postision: 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属性改变
切换class时，position属性改变
实际结果：
position属性未改变，其他属性（如top值）有改变
position属性未改变，其他属性（如top值）有改变
bug描述：
nvue页面有一个视频播放器容器，现在需求时想在播放时给他设成固定定位，暂停时恢复回相对定位。实际上position这个属性是没修改到，其他属性就修改到了
2 个回复
一顾倾人诚
https://ask.dcloud.net.cn/question/147850我也遇到了 反馈了 没解决 如果你解决了 请@ 我下
2***@qq.com
几年了官方没回应，只能用笨办法写两个一样的元素一个fixed一个正常用v-if控制显隐