1***@qq.com
1***@qq.com
  • 发布:2020-05-25 09:32
  • 更新:2020-05-25 09:32
  • 阅读:995

【报Bug】slider组件在nvue页面位置不正确

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

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

HBuilderX类型: 正式

HBuilderX版本号: 2.7.7

手机系统: Android

手机系统版本号: Android 10

手机厂商: 华为

手机机型: 荣耀20

页面类型: nvue

打包方式: 云端

项目创建方式: HBuilderX

示例代码:
<template>  
    <view class="page">  
        <video class="video"  @timeupdate='timeupdate' id="demoVideo" ref='video'  :controls='false' :enable-progress-gesture="false"   :show-center-play-btn='false' src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20181126-lite.m4v">  
         <cover-view class="cover-container"  @click="clickHandler">  
             <cover-image src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1590379274563&di=a7e5b73d097d16b14eebdb3d639bd06c&imgtype=0&src=http%3A%2F%2Fimg3.imgtn.bdimg.com%2Fit%2Fu%3D213623723%2C2520951995%26fm%3D214%26gp%3D0.jpg" ></cover-image>  
            <cover-image class="controls-play img" @click.stop="play" src="/static/play.png" v-if="status==='pause'"></cover-image>  
             <cover-image class="controls-pause img" @click.stop="pause" src="/static/pause.png"  v-if="status==='play'"></cover-image>  
            <cover-view class="controls-container flex row" >  
                <!-- #ifndef APP-NVUE -->  
                <cover-view class="time">{{time|formateTime}}</cover-view>  
                <!-- #endif -->  

                <!-- #ifdef APP-NVUE -->  
                <cover-view class="time"><text class="time-text">{{time|formateTime}}</text></cover-view>  
                <!-- #endif -->  

                <cover-view style="flex: 1;" class="progress-container">  
                    <slider value="10" @change="sliderChange" min="0" max="100"  block-size='10' activeColor="#f7662d" block-color='#f7662d'/>  
                </cover-view>  

                <!-- #ifndef APP-NVUE -->  
                <cover-view class="time">{{duration|formateTime}}</cover-view>  
                <!-- #endif -->  

                <!-- #ifdef APP-NVUE -->  
                <cover-view class="time"><text class="time-text">{{duration|formateTime}}</text></cover-view>  
                <!-- #endif -->  

            </cover-view>  
        </cover-view>  
        <!-- <view style="width: 200upx;height: 300upx;background-color: #007AFF;" >  
            222  
        </view> -->  

    </video>  
    </view>  
</template>  
<script>  
    export default {  
        data() {  
            return {  
                status:'pause',  
                time:26,  
                duration:3800  
            }  
        },  
        mounted() {  
            this.videoCtx = uni.createVideoContext('demoVideo')  
            const query=uni.createSelectorQuery().in(this)  
            console.log(query.select('#demoVideo'))  
        },  
        filters:{  
            formateTime(time){  
                let h=Math.floor(time/3600).toString().padStart(2,'0')  
                let m=Math.floor((time%3600)/60).toString().padStart(2,'0')  
                let s=Math.floor(time%60).toString().padStart(2,'0')  

                return `${m}:${s}`  
            }  
        },  
        methods: {  
            play(event) {  
                this.videoCtx.play();  
                uni.showToast({  
                    title: '开始播放',  
                    icon: 'none'  
                });  
                this.status='play'  
            },  
            pause(event) {  
                this.videoCtx.pause();  
                uni.showToast({  
                    title: '暂停播放',  
                    icon: 'none'  
                });  
                this.status='pause'  
            },  
            clickHandler(){  
                console.log('点击')  
            },  
            timeupdate(e)  
            {  
                console.log(e)  
            },  
            sliderChange(){  

            }  
        }  
    }  
</script>  
<style>  
    @font-face {  
      font-family: 'iconfont';  /* project id 1837686 */  
      src: url('https://at.alicdn.com/t/font_1837686_mqomj8xlsi.eot');  
      src: url('https://at.alicdn.com/t/font_1837686_mqomj8xlsi.eot?#iefix') format('embedded-opentype'),  
      url('https://at.alicdn.com/t/font_1837686_mqomj8xlsi.woff2') format('woff2'),  
      url('https://at.alicdn.com/t/font_1837686_mqomj8xlsi.woff') format('woff'),  
      url('https://at.alicdn.com/t/font_1837686_mqomj8xlsi.ttf') format('truetype'),  
      url('https://at.alicdn.com/t/font_1837686_mqomj8xlsi.svg#iconfont') format('svg');  
    }  

    .flex{  
        /* #ifndef APP-NVUE */  
        display: flex;  
        /* #endif */  
    }  
    .row{  
        flex-direction: row;  
    }  

    .column{  
        flex-direction: column;  
    }  

    .video {  
        position: relative;  
        width: 750upx;  
        /* #ifndef APP-NVUE */  
        display: flex;  
        /* #endif */  
        flex-direction: column;  
    }  

    .img {  
       position: absolute;  
        top: 220upx;  
        left: 375upx;  
        transform: translate(-50%,-50%);  
        width: 100rpx;  
        height: 100rpx;  
       /* margin-top: -50rpx; */  
    }  

    .controls-play {  
      /*  left: 50rpx; */  
    }  

    .controls-pause {  
     /*   right: 50rpx; */  
    }  

    .controls-container {  
        width: 750upx;  
        bottom: 0;  
        position: absolute;  
        /* padding: 20upx 0; */  
        background-color: rgba(0, 0, 0, 0.5);  
    }  

    .cover-container{  
        width: 750upx;  
        height: 100%;  
        flex: 1;  
         position: relative;  

    }  

    .time{  
        color: #FFFFFF;  
        margin-left: 10upx;  
        margin-right: 10upx;  
        font-size: 22upx;  
        /* #ifndef APP-NVUE */  
        display: flex;  
        /* #endif */  
        flex-direction: row;  
        align-items: center;  
    }  
    .time-text{  
        color: #FFFFFF;  
        font-size: 22upx;  
        /* #ifndef APP-NVUE */  
        display: flex;  
        /* #endif */  
        flex-direction: row;  
        align-items: center;  
    }  

    .progress-container{  
        position: relative;  
/*      margin: 0 20upx; */  
    }  

</style>

操作步骤:

使用nvue运行上面代码

预期结果:

slider组件的滑块在nvue中位置渲染正确

实际结果:

slider组件的滑块在nvue中位置渲染不正确

bug描述:

slider组件的滑块在nvue中位置渲染不正确

2020-05-25 09:32 负责人:无 分享
已邀请:

该问题目前已经被锁定, 无法添加新回复