html/weui slider

我们在开发公众号的时候难免会遇到使用slider情况，如音量控制，歌曲进度等。

这里可参考：http://www.vxzsk.com/772.html

这个是weui给的例子

在实际使用的时候还是不行，可以稍作修改：

 1 var $sliderTrack = $('#sliderTrack'),
 2     $sliderHandler = $('#sliderHandler'),
 3     $sliderValue = $('#sliderValue');
 4 
 5 var totalLen = $('#sliderInner').width(),
 6     startLeft = 0,
 7     startX = 0;
 8 
 9 
10 $sliderHandler
11     .on('touchstart', function(e) {
12         console.log(e.originalEvent);
13         totalLen = $('#sliderInner').width();
14         startLeft = parseInt($sliderHandler.css('left'));
15         startX = e.originalEvent.changedTouches[0].clientX;
16     })
17     .on('touchmove', function(e) {
18         var dist = startLeft + e.originalEvent.changedTouches[0].clientX - startX,
19             percent;
20         dist = dist < 0 ? 0 : dist > totalLen ? totalLen : dist;
21         percent = parseInt(dist / totalLen * 100);
22         $sliderTrack.css('width', percent + '%');
23         $sliderHandler.css('left', percent + '%');
24         $sliderValue.text(percent + '%');
25 
26         e.preventDefault();
27     });

只是改了些事件的参数

要新增点击事件的话：

1 $('#sliderInner').on('click', function(e) {
2     totalLen = $('#sliderInner').width();
3     var left = e.originalEvent.offsetX;
4     var percent = parseInt(left / totalLen * 100);
5     $sliderTrack.css('width', percent + '%');
6     $sliderHandler.css('left', percent + '%');
7 });

附上使用的div：

1 <div class="weui-slider-box">
2         <div class="weui-slider">
3             <div id="sliderInner" class="weui-slider__inner">
4                 <div id="sliderTrack" style=" 50%;" class="weui-slider__track"></div>
5                 <div id="sliderHandler" style="left: 50%;" class="weui-slider__handler"></div>
6             </div>
7         </div>
8         <div id="sliderValue" class="weui-slider-box__value">50</div>
9 </div>

引入的css：

1 <link rel="stylesheet" href="https://weui.io/weui.css">
2 <link rel="stylesheet" href="https://weui.io/example.css">

引入的javascript:

1 <script src="https://weui.io/zepto.min.js"></script>