一、问题描述# X F3 W0 e) v6 ]/ ]! _0 Q5 c
在用vue做页面设计时，需要实现一些进度条功能，如视频、音频播放等。那么什么是slider滑块？如何用slider滑块实现进度条功能呢？
: }& p$ W) K3 Y二、解决方案
+ H% D9 d5 {- p' y, w' k slider滑块是Element UI中的一个组件，通过拖动滑块在一个固定区间内进行选择。主要是知道slider的属性，min:最小值，max最大值，step步长，注意取值必须大于0，还能被（max-min）整除。
b, S6 P1 a) g/ }. e2 y& j<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: 拖动过程中触发的事件
1 e& R/ _( I7 L& V% x9 P3 L8 O2 I v" p<view>
<slider min="0" :max="50" @changing="onchanging" @change="onchange"block-size="10"backgroundColor="#8a858a"></slider>
</view>
效果图：8 z. @& ~, H" H5 U- c1 U1 y9 Y* b
| 
|手机版|小黑屋|paopaomj.COM
( 
渝ICP备18007172号|
渝公网安备50010502503914号 )
发表于 2021-10-14 09:47:58