新版weui滑块Slider使用

2017年04月07日 17:43 | 1768次浏览 | 分类: 微信WeUI 作者原创 版权保护

weui样式库weui.cssexample.css请前往https://github.com/weui/weui下载。记得是最新版本,不要下载错了.

在做本案例的时候本作者着实费了一番功夫,主要因为HTML5的touchstart changedTouches[0]一直报错 ,导致滑块效果无法实现,调试了一番之后终于实现了,具体实现如下

一,引入css文件

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

记得html设置成移动浏览

 <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"


二、滑块Slider的html代码

在<body></body>之间添加如下代码

<div class="page__hd">
        <h1 class="page__title">Slider</h1>
        <p class="page__desc">滑块</p>
    </div>
    <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>
    <div class="page__ft">
        <a href="javascript:home()"><img src="https://weui.io/images/icon_footer_link.png" /></a>
    </div>
</div>

,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) {
				//alert("----"+changedTouches[0]);
                startLeft = parseInt($sliderHandler.css('left')) * totalLen / 100;
                startX = e.changedTouches[0].clientX;
				//alert(startX);
            })
            .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>

注意touchstart 和touchmove


四、效果

用谷歌浏览器打开页面,然后切换到手机模式下,默认情况下滑块位于50%处。

把鼠标箭头放到拉线处拉动,,效果如下

如上图所示,我们已经把滑块滑动到65%处了。


五、完整html代码

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
  <title>www.vxzsk.comV型知识库</title>
 </head>
 <link rel="stylesheet" href="https://weui.io/weui.css">
<link rel="stylesheet" href="https://weui.io/example.css">
<script src="https://weui.io/zepto.min.js"></script>
    

 <body>

<div class="page__hd">
        <h1 class="page__title">Slider</h1>
        <p class="page__desc">滑块</p>
    </div>
    <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>
    <div class="page__ft">
        <a href="javascript:home()"><img src="https://weui.io/images/icon_footer_link.png" /></a>
    </div>
</div>
<script type="text/javascript">
    $(function(){
		//www.vxzsk.com V型知识库 原创
        var $sliderTrack = $('#sliderTrack'),
            $sliderHandler = $('#sliderHandler'),
            $sliderValue = $('#sliderValue');

        var totalLen = $('#sliderInner').width(),
            startLeft = 0,
            startX = 0;

        $sliderHandler
            .on('touchstart', function (e) {
				//alert("----"+changedTouches[0]);
                startLeft = parseInt($sliderHandler.css('left')) * totalLen / 100;
                startX = e.changedTouches[0].clientX;
				//alert(startX);
            })
            .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>
    
  
 </body>
</html>


此文章本站原创,地址 http://www.vxzsk.com/772.html   转载请注明出处!谢谢!

感觉本站内容不错,读后有收获?小额赞助,鼓励网站分享出更好的教程