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="width: 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>