一、问题描述5 c; d- d+ Z6 u% a
在用vue做页面设计时,需要实现一些进度条功能,如视频、音频播放等。那么什么是slider滑块?如何用slider滑块实现进度条功能呢?
& a3 Y: \! M+ |+ ]0 k0 I' r二、解决方案( D3 l8 l! P* ]1 a0 I! @. @) t3 F
slider滑块是Element UI中的一个组件,通过拖动滑块在一个固定区间内进行选择。主要是知道slider的属性,min:最小值,max最大值,step步长,注意取值必须大于0,还能被(max-min)整除。: U' t) F$ e, \: A4 k+ D7 c) R
<view>
<slider min="0" max="50" step="10" ></slider>
</view> 基本的样式设置,activeColor: 滑块左侧已选择部分的线条颜色,backgroundColor: 滑块右侧背景条的颜色,block-size: 滑块的大小, 取值范围为12 - 28,block-color: 滑块的颜色。<view>
<slider min="0" max="50" step="10" activeColor="#007AFF" block-size="15"block-color="#6f6f6f"backgroundColor="#8a858a"></slider>
</view> @change: 完成一次拖动后触发的事件,@changeing: 拖动过程中触发的事件
W) T0 N6 V, c, j<view>
<slider min="0" :max="50" @changing="onchanging" @change="onchange"block-size="10"backgroundColor="#8a858a"></slider>
</view> 效果图:6 `3 j$ }* {8 P) ^$ [& O
|