Slider滑块实现进度条

一时失言乱红尘 2022-09-16 00:21 449阅读 0赞

**本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。**

问题描述

在用vue做页面设计时，需要实现一些进度条功能，如视频、音频播放等。那么什么是slider滑块？如何用slider滑块实现进度条功能呢？

解决方案

slider滑块是Element UI中的一个组件，通过拖动滑块在一个固定区间内进行选择。

主要是知道slider的属性，min:最小值，max最大值，step步长，注意取值必须大于0，还能被（max-min）整除。

<table> 
 <tbody> 
  <tr> 
   <td><p>&lt;view&gt;</p><p>&lt;slider min="0" max="50" step="10" &gt;&lt;/slider&gt;</p><p>&lt;/view&gt;</p></td> 
  </tr> 
 </tbody> 
</table>

基本的样式设置，activeColor: 滑块左侧已选择部分的线条颜色，backgroundColor: 滑块右侧背景条的颜色，block-size: 滑块的大小, 取值范围为12 - 28，block-color: 滑块的颜色。

<table> 
 <tbody> 
  <tr> 
   <td><p>&lt;view&gt;</p><p>&lt;slider min="0" max="50" step="10" activeColor="#007AFF" block-size="15"block-color="#6f6f6f"backgroundColor="#8a858a"&gt;&lt;/slider&gt;</p><p>&lt;/view&gt;</p></td> 
  </tr> 
 </tbody> 
</table>

@change: 完成一次拖动后触发的事件，@changeing: 拖动过程中触发的事件,

<table> 
 <tbody> 
  <tr> 
   <td><p>&lt;view&gt;</p><p>&lt;slider min="0" :max="50" @changing="onchanging" @change="onchange"block-size="10"backgroundColor="#8a858a"&gt;&lt;/slider&gt;</p><p>&lt;/view&gt;</p></td> 
  </tr> 
 </tbody> 
</table>

效果图

![00b1d561bfd1269127fce65beb992702.png][]

结语

学习了slider滑块后，它是在一定的区间内进行滑动，可以实现音乐播放时的进度条，那么也可以应用于实现图片左右滑动，后续小编就试着去实现这一功能。

实习编辑：王晓姣

稿件来源：深度学习与文旅应用实验室（DLETA）

[00b1d561bfd1269127fce65beb992702.png]: /images/20220828/12bd63ef4a5c4d5681abcf6753ca01d7.png