控制进度条不能拖动 如何用css实现
时间: 2023-07-30 18:05:25 浏览: 56
如果你想使用 CSS 样式来控制进度条不能拖动,你可以尝试在进度条的样式中添加如下代码:
```css
.uni-slider-handle {
pointer-events: none;
}
```
这段代码会将进度条的拖拽按钮的鼠标事件禁用,从而实现进度条不能拖动的效果。需要注意的是,这个做法会禁用整个进度条的拖动功能,包括鼠标点击快进的功能。如果你只是想禁用拖拽功能,但保留点击快进的功能,可以使用以下代码:
```css
.uni-slider-handle {
pointer-events: none;
}
.uni-slider-bar {
pointer-events: auto;
}
```
这个做法会将进度条的拖拽按钮的鼠标事件禁用,但保留鼠标点击快进的功能。需要注意的是,这个做法可能会存在一些兼容性问题,不过在大部分情况下是可以正常工作的。如果你的项目需要支持一些比较老旧的浏览器,可以在使用这段代码之前进行兼容性测试。
相关问题
控制进度条不能拖动 如何设置参数少样式
如果你不想使用 CSS 样式来控制进度条不能拖动,你可以尝试在组件上添加 `@change` 事件监听器,然后在该事件监听器中检查当前是否可以拖动进度条,如果不可以,则将进度条的值设置为上一次的值,从而阻止进度条的拖动。具体的代码实现如下:
```html
<uni-audio-player
:src="audioSrc"
:disable-progress="true"
@change="handleChange"
></uni-audio-player>
```
```js
export default {
data() {
return {
audioSrc: 'http://example.com/audio.mp3',
canDragProgress: false,
lastValue: 0
}
},
methods: {
handleChange(e) {
if (!this.canDragProgress) {
this.$refs.player.setValue(this.lastValue)
} else {
this.lastValue = e.detail.value
}
}
}
}
```
在上面的代码中,我们在组件上添加了 `@change` 事件监听器,并在该监听器中检查了 `canDragProgress` 变量的值,如果为 `false`,则将进度条的值设置为上一次的值,从而阻止进度条的拖动。在组件中,我们还需要将 `canDragProgress` 的值设置为 `true` 或 `false`,以控制是否允许拖动进度条。当然,如果你使用的是自定义的音频或视频播放器组件,你需要根据组件的具体实现来修改上面的代码。
微信小程序video模拟实现进度条功能可拖拽
要实现微信小程序video组件的进度条可拖拽功能,可以使用以下步骤:
1. 在.wxml文件中,使用video组件,并加上一个view容器作为进度条的背景,再加上一个view作为进度条的滑块,代码如下:
```html
<video src="{{src}}" poster="{{poster}}" bindtimeupdate="timeUpdate"></video>
<view class="progress-bar">
<view class="progress" style="width: {{progress}}%;"></view>
<view class="progress-btn" style="left: {{btnLeft}}px;"></view>
</view>
```
2. 在.wxss文件中,设置进度条和滑块的样式:
```css
.progress-bar {
position: relative;
height: 6px;
background-color: #ddd;
}
.progress {
position: absolute;
top: 0;
left: 0;
height: 6px;
background-color: #f00;
}
.progress-btn {
position: absolute;
top: -5px;
left: 0;
width: 10px;
height: 16px;
border-radius: 50%;
background-color: #fff;
border: 2px solid #f00;
box-shadow: 0 0 2px #f00;
transform: translateX(-50%);
}
```
3. 在.js文件中,定义一个data对象,包含视频的总时长、当前播放时间、进度条长度和滑块位置等信息:
```javascript
data: {
src: 'http://www.example.com/video.mp4',
poster: 'http://www.example.com/poster.jpg',
duration: 0,
currentTime: 0,
progress: 0,
btnLeft: 0,
}
```
4. 在onLoad生命周期函数中,获取视频的总时长:
```javascript
onLoad: function() {
var that = this;
wx.createVideoContext('myVideo', that).requestFullScreen();
wx.createVideoContext('myVideo', that).play();
wx.createVideoContext('myVideo', that).pause();
wx.createVideoContext('myVideo', that).seek(0);
wx.createVideoContext('myVideo', that).play();
wx.createVideoContext('myVideo', that).on('loadedmetadata', function(res) {
that.setData({
duration: res.duration
});
});
},
```
5. 在timeUpdate事件回调函数中,更新当前播放时间和进度条长度以及滑块位置:
```javascript
timeUpdate: function(e) {
var that = this;
var currentTime = e.detail.currentTime;
var duration = that.data.duration;
var progress = Math.floor(currentTime / duration * 100);
var btnLeft = progress * 3.4 - 7;
that.setData({
currentTime: currentTime,
progress: progress,
btnLeft: btnLeft
});
},
```
6. 在进度条的view容器上,绑定touchstart、touchmove和touchend事件,实现滑动改变进度条长度和滑块位置:
```javascript
touchstart: function(e) {
var that = this;
that.setData({
startX: e.touches[0].pageX,
});
},
touchmove: function(e) {
var that = this;
var startX = that.data.startX;
var moveX = e.touches[0].pageX;
var distance = moveX - startX;
var duration = that.data.duration;
var progress = that.data.progress + distance / 340 * 100;
if (progress < 0) {
progress = 0;
} else if (progress > 100) {
progress = 100;
}
var currentTime = progress / 100 * duration;
var btnLeft = progress * 3.4 - 7;
that.setData({
progress: progress,
currentTime: currentTime,
btnLeft: btnLeft,
startX: moveX,
});
},
touchend: function(e) {
var that = this;
wx.createVideoContext('myVideo', that).seek(that.data.currentTime);
},
```
通过以上步骤,就可以实现微信小程序video组件的进度条可拖拽功能。
相关推荐
![](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)