![](https://img.kancloud.cn/10/f6/10f6a0bc44dd5c8d48717d1d5777d998_748x229.jpeg) ## 引入文件 ``` <link rel="stylesheet" type="text/css" href="../css/SlideUnlock.css"/> <script src="../script/jquery-weui/js/jquery.slideunlock.min.js"></script> ``` ## 视图: ``` <div id="ea55_slide-wrapper" class="ea55_slide_wrapper"> <input type="hidden" value="" id="lockable"/> <div id="slider" class="ea55_slider"> <span id="label" class="slideunlock-label"> <svg class="ea55_icon" aria-hidden="true" > <use xlink:href="#iconupp"></use> </svg> </span> <span id="lableTip" class="slideunlock-lable-tip">向右滑动去接乘客</span> </div> </div> ``` ## 脚本: ``` <script type="text/javascript"> $(function () { var slider = new SliderUnlock(".ea55_slider", { labelTip: "向右滑动去接乘客", successLabelTip: "接单成功", duration: 200 // 动画效果执行时间,默认200ms }, function(){ // alert('success'); }, function(){ //$(".warn").text("index:" + slider.index + ", max:" + slider.max + ",lableIndex:" + slider.lableIndex + ",value:" + $(".slideunlock-lockable").val() + " date:" + new Date().getUTCDate()); }); slider.init(); // $("#reset-btn").on('click', function(){ // slider.reset(); // }); }) </script> ``` ## 初始化 ``` slider.reset(); ```