【报Bug】nvue 页面对某个元素使用position:fixed 之后脱离文档流再取消position:fixed 效果之后依然还是fixed效果

分类：uni-app

bug反馈

产品分类： uniapp/App

PC开发环境操作系统： Windows

PC开发环境操作系统版本号： windows 11

HBuilderX类型：正式

HBuilderX版本号： 3.4.15

手机系统： Android

手机系统版本号： Android 12

手机厂商：小米

手机机型：小米8

页面类型： nvue

vue版本： vue2

打包方式：云端

项目创建方式： HBuilderX

示例代码：

<template>  
    <view>  
        <view class="outerBox">  
            <view class="innerbox" :style="fixed ? fixedStyle : normalStyle"></view>  
        </view>  
        <view class="block2"></view>  
        <view class="block3"></view>  
    </view>  
</template>  

<script>  
export default {  
    data() {  
        return {  
            fixed: false,  
            fixedStyle:{  
                position:'fixed',  
                top: '80px',  
                right: '10px'  
            },  
            normalStyle:{  
                // position:'relative',  
                position: 'absolute'  
            }  
        };  
    },  
    onPageScroll(e) {  
        if (e.scrollTop > 200) {  
            // 开启视频fixed布局  
            this.fixed = true  
        }else{  
            this.fixed = false  
        }  
    }  
};  
</script>  

<style lang="scss">  
.outerBox{  
    position: relative;  
    background-color: red;  
    height: 375px;  
}  
.innerbox{  
    position: absolute;  
    top: 10px;  
    right: 10px;  
    width: 200px;  
    height: 200px;  
    background-color: aliceblue;  
}  
.block2{  
    height: 300px;  
    background-color: blue;  
}  
.block3{  
    height: 900px;  
    background-color: yellow;  
}  
</style>

操作步骤：

见代码示例

预期结果：

回归文档流

实际结果：

无法从fixed状态返回文档流

bug描述：

需要实现视频小窗口播放的功能,因为nvue 页面不能使用createIntersectionObserver
目前逻辑是根据滚动高度来判断是否开启小窗口播放视频,当滚动高度大于某个值时对视频组件添加样式 position:fixed,
高度小于某定值时取消这个样式. 通过:class="{fixedStyle:fixed}" 来控制是否添加这个样式,
同时尝试了在非fixed时添加position:relative或者 absolute 来改变定位,但是都失败了改变定位之后依然还是fixed效果

录屏.zip

nvue页面.zip

2022-06-24 14:28 负责人:无分享

6 个回复

十二112

之前也试过,nvue不能动态切position,不知道是不是bug

一顾倾人诚 (作者)

那如果要做视频小窗口播放的话怎么实现? 如果用两个视频组件就会下载两次视频文件了吧?

2022-06-24 14:44

十二112

目前看是只能这样了,简单的写了一下,其他逻辑自己实现一下就好了

<template>  
    <scroll-view class="list" scroll-y="true" :show-scrollbar="false">  
        <video  
            ref="video"  
            class="video"  
            :autoplay="true"  
            :src="videoSrc"  
            @appear="appearVideo"  
            @disappear="disappearVideo"  
            @timeupdate="changeVideoTime">  
        </video>  
        <template v-for="n in 100">  
            <text>{{n}}</text>  
        </template>  
        <video ref="smallVideo" :muted="smallMuted" @timeupdate="changeVideoTime" :style="smallVideoStyle" :src="videoSrc" class="smallVideo"></video>  
    </scroll-view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                videoSrc: '视频地址',  
                smallShow: false,  
                screenWidth: uni.getSystemInfoSync().screenWidth,  
                currentVideoTime: 0,  
                smallMuted: true,  
            }  
        },  
        computed: {  
            smallVideoStyle() {  
                return {  
                    transform: `translateX(${this.smallShow ? 0 : this.screenWidth})`,  
                }  
            }  
        },  
        onReady() {  
            this.$refs.smallVideo.play()  
            setTimeout(() => {  
                this.$refs.smallVideo.pause()  
                this.smallMuted = false  
            })  
        },  
        methods: {  
            changeVideoTime(e) {  
                this.currentVideoTime = e.detail.currentTime  
            },  
            appearVideo() {  
                this.smallShow = false  
                this.$refs.smallVideo.pause()  
                this.$refs.video.seek(this.currentVideoTime)  
                this.$refs.video.play()  
            },  
            disappearVideo() {  
                this.smallShow = true  
                this.$refs.video.pause()  
                this.$refs.smallVideo.seek(this.currentVideoTime)  
                this.$refs.smallVideo.play()  
            }  
        }  
    }  
</script>  

<style lang="scss" scoped>  
    .list {  
        flex: 1;  
    }  
    .video {  
        width: 750rpx;  
        height: 400rpx;  
    }  
    .smallVideo {  
        width: 300rpx;  
        height: 160rpx;  
        position: fixed;  
        right: 20rpx;  
        top: 100rpx;  
    }  
</style>