8***@qq.com
8***@qq.com
  • 发布:2022-07-10 18:57
  • 更新:2023-02-18 21:57
  • 阅读:248

【报Bug】内置组件slider,ios环境滑动错位以及长度无法设定

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

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

HBuilderX类型: 正式

HBuilderX版本号: 3.4.18

手机系统: Android

手机系统版本号: Android 11

手机厂商: 华为

手机机型: Mate30 Pro

页面类型: nvue

vue版本: vue2

打包方式: 云端

项目创建方式: HBuilderX

示例代码:

<template>
<view class="container">
<view class="control-view">
<view class="switch">
<image class="img" src="@/static/icon/common/pause.png"></image>
</view>
<text class="time-process">{{timeFormat(playDuration)}}</text>
<slider class="slider" :value="playDuration" min="0" :max="videoTotalDuration" block-color="#FFFFFF"
activeColor="#ebebeb" backgroundColor="#949494"
@change="durationSliderChange" block-size="14" />
<text class="time-total">{{timeFormat(videoTotalDuration)}}</text>
</view>
</view>
</template>

<script>
export default {
components: {
},
data() {
return {
videoTotalDuration: 18 * 1000,
playDuration: 0,
}
},
onLoad(pars) {
},
onShow() {
},
onBackPress() {
},
onHide() {
},
onUnload() {
},
computed: {

    },  
    methods: {  
        timeFormat(time) {  
            if (util.isNullOrEmpty(time)) {  
                return "00:00";  
            }  
            let second = parseInt(time/1000);  
            let minSecond = time%1000;  
            if (minSecond > 500) {  
                second += 1;  
            }  
            if (second < 60) {  
                return "00:"+(second < 10 ? ("0"+second):second);  
            }  
            let minute = parseInt(second/60);  
            second = second%60;  
            if (minute < 60) {  
                return (minute < 10 ? ("0"+minute):minute)+":"+(second < 10 ? ("0"+second):second);  
            }  
            let hour = parseInt(minute/60);  
            minute = minute%60;  
            return (hour < 10 ? ("0"+hour):hour)  
                        +":"+(minute < 10 ? ("0"+minute):minute)  
                        +":"+(second < 10 ? ("0"+second):second);  
        },  

        seekTo(millisecond) {  
            console.log(`MediaPlayer SeekTo: ${millisecond}`);  
            this.playDuration = millisecond;  
        },  
    }  
}  

</script>

<style lang='scss' scoped>
.container {
flex-direction: column;
flex: 1;
background: #000000;
}
.control-view {
background-color: #bcbcbc;
width: 750rpx;
position: fixed;
bottom: 400rpx;
left: 0;
right: 0;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;

    .switch {  
        width: 40prx;  
        display: flex;  
        flex-direction: row;  
        justify-content: center;  
        align-items: center;  
        .img {  
            width: 25prx;  
            height: 25prx;  
        }  
    }  
    .time-process {  
        color: #ffffff;  
        width: 45prx;  
        font-size: 30rpx;  
        text-align: right;  

    }  
    .time-total {  
        color: #ffffff;  
        width: 100rpx;  
        font-size: 30rpx;  
        text-align: left;  
    }  
    .slider {  
        width: 500rpx;  
    }  
}  

</style>

操作步骤:

IOS环境滑动错位,android可以。请查看上传操作视频

预期结果:

可修改slider长度,并且正常滑动

实际结果:

IOS环境滑动错位,android可以。

bug描述:

内置组件slider,ios环境滑动错位以及长度无法设定

2022-07-10 18:57 负责人:无 分享
已邀请:
8***@qq.com

8***@qq.com (作者) - luoqiu

操作视频

njtv

njtv

同样的问题

要回复问题请先登录注册