前言

这俩天在用WeUI框架写项目，感悟颇深呐，复制粘贴组件过一遍，还没自己写篇文章分享深刻。以后要是自己有什么新玩意也会发上来以便自己以后不记得还能回顾。好了话不多说了，今天给同学们上一篇滑块组件的使用吧。

（1）代码部分:

<!--滑块-->
			<!--不带数字的slider-->
			<div class="page__bd page__bd_spacing">
		        <div class="weui-slider">
		            <div class="weui-slider__inner">
		                <div style="width: 0;" class="weui-slider__track"></div>
		                <div style="left: 0;" class="weui-slider__handler"></div>
		            </div>
		        </div>
		        <br>
		        <div class="weui-slider-box">
		            <div class="weui-slider">
		                <div id="sliderInner" class="weui-slider__inner">
		                    <div id="sliderTrack" style="width: 50%;" class="weui-slider__track"></div>
		                    <div id="sliderHandler" style="left: 50%;" class="weui-slider__handler"></div>
		                </div>
		            </div>
		            <div id="sliderValue" class="weui-slider-box__value">50</div>
		        </div>
		    </div>

weui-slider：滑块

weui-slider__inner：滑块内部

weui-slider__track：滑块轨道（也就是那条线）

weui-slider__handler：滑块按钮

weui-slider-box__value：滑动计数

weui-slider-box：滑动器容器

(2)JS部分：

<!--滑块事件-->
			<script type="text/javascript" >
			    $(function(){
			        var $sliderTrack = $('#sliderTrack'),//获取已滑动的距离
			            $sliderHandler = $('#sliderHandler'),//获取滑块对象
			            $sliderValue = $('#sliderValue');//获取数字显示对象
			
			        var totalLen = $('#sliderInner').width(),//获取整条线的宽度
			            startLeft = 0,
			            startX = 0;
			
			        $sliderHandler
			            .on('touchstart', function (e) {//当滑块对象改变时触发事件
			                startLeft = parseInt($sliderHandler.css('left')) * totalLen / 100;
			                startX = e.changedTouches[0].clientX;
			            })
			            .on('touchmove', function(e){
			                var dist = startLeft + e.changedTouches[0].clientX - startX,
			                    percent;
			                dist = dist < 0 ? 0 : dist > totalLen ? totalLen : dist;
			                percent =  parseInt(dist / totalLen * 100);
			                $sliderTrack.css('width', percent + '%');
			                $sliderHandler.css('left', percent + '%');
			                $sliderValue.text(percent);
			
			                e.preventDefault();
			            });
			    });
			</script>

(3)效果图：

没动之前的样子。

滑动之后。

——来自胡小哥WeUI自学笔记（持续更新中...）