Layui的滑块

红太狼 2021-12-20 13:53 598阅读 0赞

1:引用layui的css和js：

2：在页面上放一个div，用来示范，给这个div一个ID：‘slideTest1’，然后可以写一些样式，比如让它距离上边距20%，左右居中：margin: 20% auto；宽80%，高20px等等；
    <div id="slideTest1" style="margin: 20% auto;width: 80%;height: 20px;"></div>
    3：然后再通过layui的方法：layui.use去加载layui的一个模块，模块名称为：slider，也就是滑块的意思，然后再声明变量去接收加载的模块，接下来就可以通过刚刚那个变量来使用滑块功能了；
    4：首先，用elem参数来指定刚刚那个div的ID：‘slideTest1’，指定完成以后就会出现一个最基础的效果了，先来看看效果截图：
     ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190628080327148.png)
    
    从上图中可以看出：当你拖动那个白色环的时候，环就会在灰色的线上滑动，并且上面会有一个数字的提示，根据你滑动的位置进行估算，现在是的位置百分之多少；
    5：上面的只是一个默认值，再来看看其他的功能：上图可以看出滑块是水平滑动的，那么如果想让它变成垂直滑块，就像调节音量那样的效果呢，那你就可以用‘type’改变它的滑块类型，如：type:’vertical’,这样就会将水平滑块改为垂直滑块；不过这里还是用水平滑块演示比较方便；
    6：如果你需要进行一个范围的拖拽，就像裁剪那样，那你就可以开启‘range’这个参数，给它设为true就行了，开启以后这时候就会出现两个可以拖动的环，而墨绿色的线就是你需要的那个范围；
    范围拖拽环效果截图：

![在这里插入图片描述][20190628080424268.png]  
7：当你不想滑动，或者懒得滑动时到准确数值位置时，你可以开启输入框‘input’设为true，输入数值后可以直接跳到你所需的位置，但是它和上面的范围拖拽是发生冲突的，也就是只能二选一，开启一个；而如果你不想显示那种单调的数字提示文本时，你还可以自定义提示文本，用‘setTips’：function(回调)‘value’（显示值），然后再return（返回）你需要的提示文本，比如：  
  
这样就完成效果了，再打开浏览器看一下输入框和提示文本的效果（最右边为输入框）：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MzEzMQ_size_16_color_FFFFFF_t_70]

[20190628080424268.png]: /images/20211220/ff138231081744d09f543776610313bf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MzEzMQ_size_16_color_FFFFFF_t_70]: /images/20211220/74b16b7a213f4e3985bf91baf6a8f515.png