【报Bug】第一次进入nvue页面拖动滑块获取到的数据都是null

1***@qq.com (作者)

<template style="background: #000;">
<view class="play-video"
style="{'width':screenWidth+'px','height': screenHeight+'px',opacity:screenHeight!=0?1:0}">
<view class="content"
style="{'width':screenWidth+'px','height': screenHeight+'px','position': 'relative','zIndex': 1}">
<video id="myVideo" class="u-w-460" preload="auto"
style="{'width':screenWidth+'px','height': screenHeight+'px',opacity:isShowVideo?1:0}" autoplay
src="videosrc" :enable-progress-gesture="true" object-fit="contain" :controls="false"
show-play-btn="false" :enable-play-gesture="false" :show-fullscreen-btn="false" @click="clickVideo"
show-center-play-btn="false" :show-loading="false" @seeking="seeking" @timeupdate="timeUpdate"
@ended="endedFun" @loadedmetadata="handleLoadedMetadata">

<cover-view
style="{width:screenWidth+'px','height': (screenHeight0.15)+'px',opacity:isShowConsole?.8:0,paddingLeft:(screenWidth0.05)+'px'}"
class="top-box">

<cover-image @click="isShowConsole?clickLeft($event):''" src="../../static/images/left.png"

style="width:50rpx;height: 50rpx;" />

　<!-- <text style="color: #fff;margin-left:20rpx;">课前准备</text> -->

</cover-view>

<cover-view

style="{width:screenWidth+'px','height': (screenHeight0.15)+'px',opacity:isShowConsole?1:0}"
class="bottom-box">

<cover-view :style="{width:(screenWidth0.05)+'px',marginLeft:(screenWidth*0.05)+'px'}">

<cover-image @click="isShowConsole?togglePause($event):''" src="../../static/images/zantin.png"

v-if="isPlay" style="width: 50rpx;height: 50rpx;" />

<cover-image @click="isShowConsole?togglePause($event):''" src="../../static/images/kaishi.png"

v-else style="width: 45rpx;height: 45rpx;" />

</cover-view>

            <cover-view :style="{width:(screenWidth*0.9)+'px',marginRight:(screenWidth*0.05)+'px'}"  

                class="jindu">  

                　<text  

style="{marginRight:(screenHeight*0.02)+'px',color:'#fff',fontSize:'35rpx'}">{{secondsToHms(currentTime)}}</text>

                <cover-view :style="{width:(screenWidth*0.9)*0.8+'px'}">  

                    <u-slider v-model="currentTime" :step="1" :min="0" :max="duration" @change="sliderChange"  

                        @changing="sliderChanging"></u-slider>  



                    <!-- <u-slider value="30"></u-slider> -->  

                    <!-- <slider :min="0" :max="duration" v-model="currentTime" @change="sliderChange"  

                        class="my-slider" @changing="sliderChanging" activeColor="#007AFF"  

                        backgroundColor="#FF3333" block-color="#007AFF" :block-size="12" /> -->  

                </cover-view>  

                <text  

style="{marginLeft:(screenHeight*0.02)+'px',color:'#fff',fontSize:'35rpx'}">{{secondsToHms(duration)}}</text>
</cover-view>

</cover-view>

</video>

</view>  

<uni-popup ref="alertDialog" type="dialog">  

    <uni-popup-dialog type="success" cancelText="离开" confirmText="继续学习" title="温馨提示" @close="close"  

        titleFize="38rpx" @confirm="studyOk">  

        <text style="color: #333333;font-size: 28rpx;">你还没观看完此视频</text>  

    </uni-popup-dialog>  

</uni-popup>  



<uni-popup ref="finishedDialog" type="dialog">  

    <uni-popup-dialog type="success" cancelText="再看一次" confirmText="提交作业" title="温馨提示" @confirm="close"  

        titleFize="38rpx" @close="studyOk">  

        <text style="color: #333333;font-size: 28rpx;">你看完学习视频啦！快去提交作品吧！</text>  

    </uni-popup-dialog>  

</uni-popup>  

</view>

</template>

<script>

import {

appLearnReadVideo

} from "@/api/http/study.js";

export default {  

    data() {  

        return {  

            isDrag: false, //是否拖拽  

            isShowConsole: true, //是否显示控制器  

            isPlay: true, //是否播放视频  

            isShowVideo: false, //是否显示视频播放器  

            isManual: false,  

            duration: 0,  

            videosrc: '',  

            isLocked: false, //是否锁定  

            isFullscreen: false,  

            currentTime: 0, //当前视频播放的秒数  

            id: '',  

            status: '',  

            videoContext: null, //视频实例化  

            screenHeight: 0, //当前屏幕高度  

            screenWidth: 0, //当前屏幕宽度  

        };  

    },  

    onLoad(options) {  

        uni.getSystemInfo({  

            success: (res) => {  

                console.log('判断onLoad', plus.navigator.getOrientation())  

                //0代表竖屏  

                if (plus.navigator.getOrientation() == 0) {  

                    this.screenWidth = res.screenHeight  

                    this.screenHeight = res.screenWidth  

                } else {  

                    this.screenWidth = res.screenWidth  

                    this.screenHeight = res.screenHeight  

                }  

                console.log('onLoad', res, this.screenWidth, this.screenHeight)  

                this.videoContext = uni.createVideoContext("myVideo", this);  

            }  

        })  

        if (options) {  

            this.videosrc = options.videosrc;  

            this.id = options.id;  

            this.status = options.status;  

            this.appLearnReadVideoFun();  

        }  

    },  

    onReady() {  

        console.log('onReady')  

        // 页面准备好后获取滑块进度  

        this.getSliderProgress();  

    },  

    onShow() {  

        console.log('onShow')  

        uni.hideKeyboard();  

        plus.navigator.setFullscreen(true);  

        plus.screen.lockOrientation('landscape-primary');  

        uni.showLoading()  

        setTimeout(() => {  

            uni.hideLoading();  

            this.isShowVideo = true;  

            // setTimeout(() => {  

            //  uni.getSystemInfo({  

            //      success: (res) => {  

            //          this.screenWidth = res.screenWidth  

            //          this.screenHeight = res.screenHeight  

            //      }  

            //  })  

            // }, 200)  

        }, 1200)  

    },  

    onUnload() {  

        console.log('页面卸载')  

        plus.screen.lockOrientation('portrait-primary');  

        plus.screen.unlockOrientation();  

    },  

    onBackPress(e) {  

        if (e.from === 'backbutton') {  

            console.log('点击')  

            if (this.currentTime != this.duration && this.isManual === false) {  

                console.log('需要弹窗')  

                this.videoContext.pause();  

                this.isPlay = false  

                this.$refs.alertDialog.open('success')  

                return true;  

            } else {  

                plus.screen.lockOrientation('portrait-primary');  

                plus.screen.unlockOrientation();  

                return false;  

            }  

        }  

    },  

    methods: {  

        getSliderProgress() {  

            // 获取滑块进度的逻辑  

            const slider = this.$refs.slider;  

            if (slider) {  

                this.currentTime = slider.value;  

            }  

        },  

        //触摸视频时候显示或者隐藏控制栏  

        clickVideo() {  

            console.log('点击', this.isPlay)  

            if (this.isPlay) {  

                this.isShowConsole = !this.isShowConsole  

                console.log(this.isShowConsole)  

            }  

        },  

        //秒数转格式  

        secondsToHms(t) {  

            // let h = parseInt(`${t / 60 / 60}`)  

            let m = parseInt(`${t / 60 % 60}`)  

            let s = parseInt(`${t % 60}`)  

            //三元表达式 补零 如果小于10 则在前边进行补零 如果大于10 则不需要补零  

            // h = h < 10 ? '0' + h : h  

            m = m < 10 ? '0' + m : m  

            s = s < 10 ? '0' + s : s  

            return `${m}:${s}`  

            // return `${h}:${m}:${s}`  

        },  

        /**  

         * 滑块进行拖动进度播放（当滑块松开时候设置播放进度）  

         */  

        sliderChange(e) {  

            console.log(e)  

            //通过计算滑块百分百来实现播放进度的位置  

            this.isDrag = false  

            const t = e || 0  

            // this.currentTime = parseInt(t) + 1;  

            if (this.duration > 0.1) {  

                this.videoContext.seek(t); //设置播放进度（秒）  

                this.isPlay = true;  

                this.videoContext.play()  

            }  

            // this.videoContext.play()  

        },  

        //拖动进度条时候触发  

        sliderChanging(e) {  

            const t = e || 0  

            if (this.duration > 0.1) {  

                this.isDrag = true  

                this.isPlay = false;  

            }  

        },  

        studyOk() {  

            this.isPlay = true;  

            this.videoContext.play()  

        },  

        clickLock() {  

            this.isLocked = !this.isLocked;  

            console.log('锁定状态:', this.isLocked);  

        },  

        clickScreen() {  

            console.log('屏幕');  

        },  

        clickAllScreen() {  

            if (!this.isFullscreen) {  

                plus.screen.lockOrientation('landscape-primary');  

            } else {  

                plus.screen.unlockOrientation();  

            }  

            this.isFullscreen = !this.isFullscreen;  

        },  

        //点击返回  

        clickLeft(e) {  

            console.log('点击')  

            e.stopPropagation() //阻止事件冒泡  

            if (this.currentTime != this.duration && this.isManual === false) {  

                this.videoContext.pause();  

                this.isPlay = false  

                this.$refs.alertDialog.open('success')  

            } else {  

                uni.navigateBack()  

            }  

        },  

        //确认退出  

        close() {  

            plus.screen.lockOrientation('portrait-primary');  

            plus.screen.unlockOrientation();  



            const pages = getCurrentPages();  

            const prevPage = pages[pages.length - 2];  

            if (prevPage.setData) {  

                setTimeout(() => {  

                    prevPage.setData({  

                        type: 0  

                    });  

                }, 500)  

            }  

            uni.navigateBack()  

        },  

        handleLoadedMetadata(e) {  

            const {  

                duration  

            } = e.detail  

            // 记录视频总时间  

            this.duration = parseInt(duration)  

        },  

        saveProgress() {  

            this.videoContext.seek(0);  

        },  

        timeUpdate(e) {  

            // 拖拽时不需要进行更新  

            if (!this.isDrag) {  

                // 更新进度  

                const {  

                    currentTime,  

                    duration  

                } = e.detail  

                this.currentTime = parseInt(currentTime)  

                this.duration = parseInt(duration)  

                // // 播放完成  

                // if (Math.trunc(currentTime) === Math.trunc(duration)) {  

                //     this.$emit('playcomplete', e)  

                // }  

            }  

        },  

        endedFun() {  

            console.log('看完啦')  

            this.isManual = true;  

            this.isPlay = false;  

            this.$refs.finishedDialog.open('success');  

            this.currentTime = this.duration;  

        },  

        appLearnReadVideoFun() {  

            appLearnReadVideo({  

                id: this.id  

            })  

        },  

        togglePause(e) {  

            e.stopPropagation() //阻止事件冒泡  

            this.isPlay = !this.isPlay;  

            if (this.isPlay) {  

                this.videoContext.play();  

            } else {  

                this.videoContext.pause();  

            }  



        }  

    }  

}  

</script>

<style scoped>

.page,

page,

.content {

background: #000;

}

.play-video {  

    /*  width: 1750rpx;  

    height: 800rpx; */  

    overflow: hidden;  

    position: relative;  

    background: #000;  



}  



.jindu {  

    display: flex;  

    flex-direction: row;  

    align-items: center;  

    justify-content: center;  

    position: relative;  

}  



.bottom-box {  

    transition: opacity 1s;  

    align-items: center;  

    position: fixed;  

    background: linear-gradient(to top, rgba(0, 0, 0, 1), transparent);  

    bottom: 0rpx;  

    left: 0;  

    display: flex;  

    flex-direction: row;  

    justify-content: space-between;  

    /*  padding: 0 100rpx; */  

}  



.top-box {  

    transition: opacity 1s .8;  

    position: absolute;  

    top: 0;  

    background: linear-gradient(to bottom, rgba(0, 0, 0, 1), transparent);  

    color: #fff;  

    display: flex;  

    align-items: center;  

    flex-direction: row;  

}  



uni-slider .uni-slider-thumb {  

    box-shadow: 0 0 4px rgba(255, 170, 255, 0.5);  

}  

</style>

2024-09-06 20:33

1***@qq.com (作者)

你好 该页面代码已贴出 滑动组件也有用果uniapp原生那个 也是会出现这种null的情况

2024-09-06 20:34

1***@qq.com (作者)

还会有一种情况就是进度条拉到一般 但是进度条的数值已经达到了最高值 不确定这些问题是不是都是因为横屏之后高度问题导致

2024-09-06 20:52

1***@qq.com (作者)

你好 请问有找到问题吗

2024-09-09 11:26

DCloud_UNI_yuhe

回复 1***@qq.com: 你好，你可以精准定位一下问题吗？或者是提供一个可以直接复现的工程

2024-09-09 11:27

1***@qq.com (作者)

回复 DCloud_UNI_yuhe: 我把页面代码给您 那你那边直接真机试试可以吗

2024-09-09 11:35

1***@qq.com (作者)

回复 DCloud_UNI_yuhe: 我尝试了取消横屏 但是也是会发生这个问题 只是概率的程度 测试流程就是真机调试->进入改页面->拖动进度条 反复尝试几次 杀死app进入第一次进入该页面触发概率基本是100%

2024-09-09 11:37

DCloud_UNI_yuhe

回复 1***@qq.com: 可以的

2024-09-09 11:38

1***@qq.com (作者)

回复 DCloud_UNI_yuhe: 已将代码页面私信发送给您

2024-09-09 11:44

1***@qq.com (作者)

回复 DCloud_UNI_yuhe: 你好 我这个问题有结论吗

2024-09-11 10:57

1***@qq.com (作者)

已私信提供

2024-09-09 12:10

1***@qq.com (作者)

你好 有结论嘛 可以复现吗

2024-09-09 15:42

1***@qq.com (作者)

你好 有找到问题吗

2024-09-10 18:59