![](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();
```