我们在开发公众号的时候难免会遇到使用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>