slider 在手机app，视频横屏全屏播放时，显示slider进度100时，右侧的小圆球看不见

slider 在手机app，视频横屏全屏播放时，显示slider进度100时，右侧的小圆球看不见

开发环境 版本号 项目创建方式
Mac Apple M2；14.5 HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Mac

HBuilderX类型：正式

HBuilderX版本号：4.36

手机系统：Android

手机系统版本号：Android 13

手机厂商：OPPO

手机机型：OnePlus 8

页面类型：nvue

vue版本：vue2

打包方式：云端

示例代码：

<video @fullscreenchange="onFullscreenChange" src="https://aizuowen.oss.jkxuetang.com/courseware/2025/04/07/e1ec6b1c-744d-4e3a-a99f-03761dec7f54_tr.mp4?Expires=1746948084&amp;OSSAccessKeyId=LTAI5tAwGSgt6nGPwHNm1ngf&amp;Signature=3Zuzx7Tn8BlT64IOlqNFF0HMiIc%3D">  
    <cover-view style="flex:1;padding-top: 60px;">
        <slider  
        v-if="isFullscreen"  
        activeColor="#1677ff"  
        :block-size="12"  
        class="slider-self"  
        :step="1"   
        :value="100"  
        :height="'8px'"  
    />
    </cover-view>
</video>
`

5 回复

另外一个问题：使用dom.getComponentRect 这个方式获取到的宽度比实际宽度还大，屏幕宽度800，但是这个元素获取到的width:805.9310913085938,left:15.699955940246582,“right”: 821.6310424804688,


目前我能测试的机型：一加8和小米的都有这个问题，无其他手机可测试

在小米机型也是一样的问题，进度100%，小圆球看不到

感谢反馈，问题已复现，已加分

这是一个常见的横屏全屏播放时slider显示不全的问题。主要原因是slider的滑块在100%位置时被屏幕边缘截断。

解决方案建议：

  1. 调整slider的边距：
.slider-self {
  margin-right: 12px; /* 根据滑块大小调整 */
}
  1. 或者使用padding替代：
.slider-self {
  padding-right: 12px;
}
  1. 也可以考虑减少slider的宽度：
.slider-self {
  width: 95%;
}
  1. 如果使用nvue，可能需要使用transform来调整位置：
.slider-self {
  transform: translateX(-6px);
}
回到顶部