devbox
weixin_40725706
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

使用layui滑块slider遇到问题解决：1、加标尺2、兼容移动端拖拽1、多个滑块使用赋值4、切换箭头赋值问题_layui 移动端

作者：weixin_40725706 | 2024-02-16 12:36:13

赞

踩

layui 移动端
    使用layui框架 滑块组件 slider 时遇到的问题，以下图为例，我创建了一个总滑块和3个滑块，改变总滑块可以控制滑块123：

1、我的需求是加上标尺，layui没有该功能，自己写了一个简单的,代码在下面。

2、移动端不支持滑动，只能点击，解决修改了源码。

3、设置滑块值，得到实例对象可以通过以下代码设置值，但是我动态创建的slider要怎么用变量接，难道定义多个变量吗，最后我是把渲染的滑块实例对象放到了数组中。

  1. var inst = slider.render(options);
  2. console.log(inst); // 得到当前实例对象
  3. inst.setValue(value, index)

4、我在点击总滑块时会给滑块123同时赋值改变，但是再点击某个分滑块的上下箭头时，滑块值不对，会根据上次的值修改。

html：

  1.       <ul id="avVolumAll">
  2.         <li>
  3.           <div class="layui-form-item"><span>滑块总控制</span></div>
  4.           <div class="layui-form-item vo-slider-div">
  5.             <div class="layui-inline fl" id="avAllVolumSlider"></div>
  6.             <div class="fl volum-rule">
  7.               <ul>
  8.                 <li></li>
  9.                 <li></li>
  10.                 <li></li>
  11.                 <li></li>
  12.                 <li></li>
  13.               </ul>
  14.             </div>
  15.             <div class="fl volum-rule-num">
  16.               <ul>
  17.                 <li><span>100</span></li>
  18.                 <li><span>80</span></li>
  19.                 <li><span>60</span></li>
  20.                 <li><span>40</span></li>
  21.                 <li><span>20</span></li>
  22.                 <li><span>0</span></li>
  23.               </ul>
  24.             </div>
  25.           </div>
  26.           <div><i id="avAllVolumeIcon" class="iconfont icon-24gl-volumeHigh" onclick="avVolumeMuteBtn(999, this)"></i></div></li>
  27.       </ul>
  28.       <ul id="avVolumUl">
  29.       </ul>

css： 

  1. .fl {
  2.     float: left;
  3. }  
  4. #avVolumAll, #avVolumUl {
  5.       li {
  6.         float: left;
  7.         width: 100px;
  8.         text-align: center;
  9.         color: #fff;
  10.         border: 1px outset #335e77;
  11.         padding: 18px 14px;
  12.         margin: 10px;
  13.         box-sizing: border-box;
  14.         font-size: 13px;
  15.         .vo-slider-div {
  16.           margin-top: 66px;
  17.           .layui-slider-wrap-btn {
  18.             border-radius: 2px;
  19.           }
  20.           .layui-slider-vertical {
  21.             margin-left: 14px;
  22.           }
  23.         }
  24.         .iconfont {
  25.           font-size:22px;
  26.         }
  27.       }
  28.  
  29.       .volum-rule {
  30.         width: 15px;
  31.         height: 200px;
  32.         ul li{
  33.           border: 0;
  34.           padding: 0;
  35.           margin: 0;
  36.           width: 12px;
  37.           height: 40px;
  38.           border-bottom: 1px solid #838080;
  39.           // border-left: 1px solid #838080;
  40.           &:first-child{
  41.             border-top: 1px solid #838080;
  42.           }
  43.         }
  44.       }
  45.       .volum-rule-num {
  46.         width: 18px;
  47.         height: 200px;
  48.         ul li{
  49.           border: 0;
  50.           margin: 0;
  51.           width: 18px;
  52.           padding: 0;
  53.           height: 40px;
  54.           position: relative;
  55.           span {
  56.             font-size: 12px;
  57.             position: absolute;
  58.             left: 2px;
  59.             top: -7px;
  60.           }
  61.         }
  62.       }
  63.   }

 js：

  1. //初始化总控制滑块    
  2. let audioAllVolSlide = slider.render({
  3.         elem: '#avAllVolumSlider',
  4.         value: 50,
  5.         min: 0,
  6.         max: 100,
  7.         input: true ,                
  8.         type: 'vertical', // 垂直滑块
  9.         height : 200,
  10.         change: function (value) {
  11.             console.log("全部== " + value); //动态获取滑块数值
  12.             let val = parseInt(value);
  13.             if(audioVolSlideArr.length > 0) {
  14.                 for(let j = 0;j< audioVolSlideArr.length;j++) {
  15.                     audioVolSlideArr[j].setValue(val);
  16.                 }
  17.             }
  18.             if(value == 0) {
  19.                 $("#avAllVolumeIcon").attr("class","iconfont icon-24gl-volumeCross");
  20.             } else {
  21.                 $("#avAllVolumeIcon").attr("class","iconfont icon-24gl-volumeHigh");
  22.             }
  23.         }
  24.     });
  25.  
  26.  
  27. let audioVolSlideArr = [];//所有小滑块数组
  28. let list = [{ "volumeL": 14, "name": "滑块1" }, { "volumeL": 50, "name": "滑块2" }, { "volumeL": 40, "name": "滑块3" }];//模拟数据
  29. function displayAvVolumUl() {
  30.     $("#avVolumUl").empty();
  31.     audioVolSlideArr.length = 0;
  32.     for (let i = 0; i < list.length; i++) {
  33.         let item = list[i];
  34.         let vClass = item.volumeL == 0 ? "iconfont icon-24gl-volumeCross" : "iconfont icon-24gl-volumeHigh";
  35.         let html = `<li>
  36.             <div class="layui-form-item"><span>${item.name}</span></div>
  37.             <div class="layui-form-item vo-slider-div">
  38.               <div class="layui-inline fl" id="avVolumSlider-${i}"></div>
  39.               <div class="fl volum-rule">
  40.                 <ul><li></li><li></li><li></li><li></li><li></li></ul>
  41.               </div>
  42.               <div class="fl volum-rule-num">
  43.                 <ul><li><span>100</span></li><li><span>80</span></li><li><span>60</span></li><li><span>40</span></li><li><span>20</span></li><li><span>0</span></li></ul>
  44.               </div>
  45.             </div>
  46.             <div><i id="avVolumeIcon-${i}" class="${vClass}" onclick="avVolumeMuteBtn(${i}, this)"></i></div></li>`;
  47.         $("#avVolumUl").append(html);
  48.         let sliderItem = slider.render({
  49.             elem: '#avVolumSlider-' + i,
  50.             value: item.volumeL,
  51.             min: 0,
  52.             max: 100,
  53.             input: true, // 输入框
  54.             type: 'vertical', // 垂直滑块
  55.             height: 200,
  56.             change: function (value) {
  57.                 if (value == 0) {
  58.                     $("#avVolumeIcon-" + i).attr("class", "iconfont icon-24gl-volumeCross");
  59.                 } else {
  60.                     $("#avVolumeIcon-" + i).attr("class", "iconfont icon-24gl-volumeHigh");
  61.                 }
  62.             }
  63.  
  64.         });
  65.         audioVolSlideArr.push(sliderItem);
  66.     }
  67. }

 兼容移动端拖拽滑块滑动，我在mousedown下面加了touchstart 这一段代码，暂时解决

  1.  //滑块滑动
  2.     sliderAct.find('.' + SLIDER_WRAP_BTN).each(function(index){
  3.       var othis = $(this);
  4.       othis.on('mousedown', function(e){
  5.         e = e || window.event;
  6.  
  7.         var oldleft = othis.parent()[0].offsetLeft
  8.         ,oldx = e.clientX;
  9.         if(options.type === 'vertical'){
  10.           oldleft = sliderWidth() - othis.parent()[0].offsetTop - sliderWrap.height()
  11.           oldx = e.clientY;
  12.         };
  13.  
  14.         var move = function(e){
  15.           e = e || window.event;
  16.           var left = oldleft + (options.type === 'vertical' ? (oldx - e.clientY) : (e.clientX - oldx));
  17.           if(left < 0)left = 0;
  18.           if(left > sliderWidth())left = sliderWidth();
  19.           var reaLeft = left / sliderWidth() * 100 / step;
  20.           change(reaLeft, index);
  21.           othis.addClass(ELEM_HOVER);
  22.           sliderAct.find('.' + SLIDER_TIPS).show();
  23.           e.preventDefault();
  24.         };
  25.  
  26.         var up = function(){
  27.           othis.removeClass(ELEM_HOVER);
  28.           sliderAct.find('.' + SLIDER_TIPS).hide();
  29.         };
  30.  
  31.         createMoveElem(move, up)
  32.       });
  33.       //20230706  兼容移动端滑动
  34.       othis.on('touchstart', function(e){
  35.         console.log(e)
  36.         e = e || window.event;
  37.  
  38.         var oldleft = othis.parent()[0].offsetLeft
  39.         ,oldx = e.originalEvent.changedTouches[0].clientX;
  40.         if(options.type === 'vertical'){
  41.           oldleft = sliderWidth() - othis.parent()[0].offsetTop - sliderWrap.height()
  42.           oldx = e.originalEvent.changedTouches[0].clientY;
  43.         };
  44.  
  45.         othis.on('touchmove', function(e){
  46.           console.log("move=== ");
  47.           e = e || window.event;//e.originalEvent.changedTouches[0]
  48.           var left = oldleft + (options.type === 'vertical' ? (oldx - e.originalEvent.changedTouches[0].clientY) : (e.originalEvent.changedTouches[0].clientX - oldx));
  49.           if(left < 0)left = 0;
  50.           if(left > sliderWidth())left = sliderWidth();
  51.           var reaLeft = left / sliderWidth() * 100 / step;
  52.           change(reaLeft, index);
  53.           othis.addClass(ELEM_HOVER);
  54.           sliderAct.find('.' + SLIDER_TIPS).show();
  55.           e.preventDefault();
  56.         });
  57.         othis.on('touchend', function(e){
  58.           // elemMove.remove();
  59.           sliderAct.find('.' + SLIDER_TIPS).hide();
  60.         });
  61.       });
  62.     });

点击总控制单个滑块后，点击单个的上下箭头值不对，加上 inputValue = sliderTxt.children('.' + SLIDER_INPUT_TXT).children('input').val(); 暂时解决

  1.     //点击加减输入框
  2.     sliderTxt.children('.' + SLIDER_INPUT_BTN).children('i').each(function(index){
  3.       $(this).on('click', function(){
  4.         inputValue = sliderTxt.children('.' + SLIDER_INPUT_TXT).children('input').val();//20230707 setValue后不对，inputValue记录的上次滑块的数，重新获取一下
  5.         if(index == 1){
  6.           inputValue = inputValue - options.step < options.min
  7.             ? options.min
  8.           : Number(inputValue) - options.step;
  9.         }else{
  10.           inputValue = Number(inputValue) + options.step > options.max
  11.             ? options.max
  12.           : Number(inputValue) + options.step;
  13.         };
  14.         var inputScale =  (inputValue - options.min) / (options.max - options.min) * 100 / step;
  15.         change(inputScale, 0);
  16.       });
  17.     });
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/93288
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号