uni disable-progress不生效 可以点击进度条快进
时间: 2024-03-31 08:32:56 浏览: 27
你好,关于 uni-app 中 `disable-progress` 属性不生效的问题,需要先确认你是在哪个组件中使用了该属性。`disable-progress` 属性通常用于音频或视频播放器组件中,用于禁用进度条的拖拽功能。如果你使用的是自定义组件,需要确保你已经在组件中正确传递了该属性。此外,需要注意的是,该属性只是禁用了进度条的拖拽功能,而不能完全禁用进度条。如果你希望完全禁用进度条,可以使用 CSS 样式来进行控制。至于你提到的可以点击进度条快进的问题,可能是因为你没有正确使用该属性,或者是你在组件中添加了其他的事件监听器导致的。希望这些信息能够帮助到你解决问题。
相关问题
disable-progress 可以点击进度条快进
很抱歉,我的回答有误。`disable-progress` 属性是用来禁用视频快进功能的,不会影响进度条的交互。如果您想要禁用进度条的交互,可以设置 `controls` 属性为 `false`,然后通过 JavaScript 控制视频的播放进度。
示例代码如下:
```html
<template>
<video
:src="videoUrl"
:controls="false"
ref="video"
@touchstart="onVideoTouchStart"
@touchmove="onVideoTouchMove"
@touchend="onVideoTouchEnd"
></video>
</template>
<script>
export default {
data() {
return {
videoUrl: "your_video_url",
startX: 0,
endX: 0,
startTime: 0,
endTime: 0
};
},
mounted() {
this.initVideo();
},
methods: {
initVideo() {
this.$refs.video.play();
},
onVideoTouchStart(event) {
this.startX = event.touches[0].pageX;
this.startTime = this.$refs.video.currentTime;
},
onVideoTouchMove(event) {
this.endX = event.touches[0].pageX;
let diffX = this.endX - this.startX;
let diffTime = diffX / 10;
let newTime = this.startTime + diffTime;
if (newTime < 0) {
newTime = 0;
} else if (newTime > this.$refs.video.duration) {
newTime = this.$refs.video.duration;
}
this.$refs.video.currentTime = newTime;
},
onVideoTouchEnd(event) {
this.endX = event.changedTouches[0].pageX;
let diffX = this.endX - this.startX;
let diffTime = diffX / 10;
let newTime = this.startTime + diffTime;
if (newTime < 0) {
newTime = 0;
} else if (newTime > this.$refs.video.duration) {
newTime = this.$refs.video.duration;
}
this.$refs.video.currentTime = newTime;
}
}
};
</script>
```
在上述示例中,我们将 `controls` 属性设置为 `false`,表示隐藏视频的控制条,然后通过监听 `touchstart`、`touchmove` 和 `touchend` 事件来控制视频的播放进度。在 `touchstart` 事件中,我们记录当前的触摸位置和视频播放的时间,然后在 `touchmove` 事件中计算出拖动的距离,并根据距离计算出视频播放的时间。在 `touchend` 事件中,我们将视频的当前播放时间设置为计算出的新时间,以实现视频的快进和后退。
需要注意的是,在实际开发中,您需要将 `your_video_url` 替换为您的视频地址。另外,为了提高用户体验,您可以在拖动过程中显示一个进度条或时间轴,以帮助用户更好地控制视频的播放进度。
uni disable-progress 为true
如果你在使用 uni-app 中的音频或视频播放器组件,并且在该组件上设置了 `disable-progress` 属性为 `true`,那么进度条的拖拽功能应该是被禁用了的。如果你仍然可以通过点击进度条来快进,那么可能是因为你在组件中添加了其他的事件监听器,或者是因为你没有正确地设置 `disable-progress` 属性。你可以检查一下组件的代码,确保没有其他的事件监听器干扰了进度条的拖拽功能,并且确认 `disable-progress` 属性已经被正确地设置为 `true`。如果问题仍然存在,可以尝试在 uni-app 的官方论坛或者社区中寻求帮助,或者向组件作者提出问题,以获得更好的解决方案。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![7z](https://img-home.csdnimg.cn/images/20210720083312.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)