1.

先看效果图：

2.

目录结构：

3.

点击此处前往码云下载此组件源码若觉得好用，记得star一个哦

4.

调用组件的index文件

//index.jsconstappgetApp()Page({data:{},myEventListener:function(e){//获取到组件的返回值，并将其打印console.log('是否验证通过:'+e.detail.msg)}})//index.json{"usingComponents":{"sliders":"/sliders/sliders"}}!--index.wxml--slidersbindmyevent"myEventListener"/sliders5.

滑动验证组件部分代码：

//sliders.jsComponent({/***组件的属性列表*/properties:{},/***组件的初始数据*/data:{hint:'右滑验证',//默认提示语sysW:wx.getSystemInfoSync().windowWidth,//获取屏幕宽度xAxial:0,//X轴的初始值x:0,//触摸时X轴的值w:(wx.getSystemInfoSync().windowWidth*0.8)-50,//滑块可移动的X轴范围cssAnimation:'translate3d(0,0,0)',//CSS动画的初始值succeedMsg:'',//验证成功提示信息的默认值pullStatus:true,//是否允许验证成功后继续滑动},/***组件的方法列表*/methods:{//滑块移动中执行的事件moveFun:function(e){//如果验证成功后仍允许滑动，则执行下面代码块（初始值默认为允许）if(this.data.pullStatus){//设置X轴的始点this.data.xe.changedTouches[0].clientX-((this.data.sysW*0.1)+25);//如果触摸时X轴的坐标大于可移动距离则设置元素X轴的坐标等于可移动距离的最大值，否则元素X轴的坐标等于等于当前触摸X轴的坐标this.data.xthis.data.w?this.data.xAxialthis.data.w:this.data.xAxialthis.data.x;//如果触摸时X轴的坐标小于设定的始点，则将元素X轴的坐标设置为0if(this.data.x25)this.data.xAxial0;//根据获取到的X轴坐标进行动画演示this.data.cssAnimation'translate3d('+this.data.xAxial+'px,0,0)';this.setData({cssAnimation:this.data.cssAnimation})}},//松开滑块执行的事件endFun:function(){//自定义组件触发事件时提供的detail对象vardetail{};//如果触摸的X轴坐标大于等于限定的可移动范围，则验证成功if(this.data.xthis.data.w){//元素X轴坐标等于可移动范围的最大值this.data.xAxialthis.data.w;//设置验证成功提示语this.data.succeedMsg'验证成功';//设置detail对象的返回值detail.msgtrue;//验证成功后，禁止滑块滑动this.data.pullStatusfalse;}else{//元素X轴坐标归0this.data.xAxial0;//清空验证成功提示语this.data.succeedMsg'';//设置detail对象的返回值detail.msgfalse;}//使用triggerEvent事件，将绑定在此组件的myevent事件，将返回值传递过去this.triggerEvent('myevent',detail);//根据获取到的X轴坐标进行动画演示this.data.cssAnimation'translate3d('+this.data.xAxial+'px,0,0)';this.setData({succeedMsg:this.data.succeedMsg,cssAnimation:this.data.cssAnimation})}}})//sliders.json{"component":true,"usingComponents":{}}!--sliders.wxml--viewclass"slidersBox"text{{hint}}/textviewclass'operationBgBox'style'left:{{-(w+2)}}px;transform:{{cssAnimation}}'text{{succeedMsg}}/textviewclass'operationBox'catchtouchmove'moveFun'catchtouchend'endFun'imagesrc'../images/line.png'/image/view/view/view/*sliders.wxss*/.slidersBox{width:80%;height:120rpx;border:1pxsolid#ccc;border-radius:5px;margin:0auto;text-align:center;line-height:120rpx;font-size:32rpx;position:relative;overflow:hidden;}.operationBgBox{height:120rpx;width:100%;background-color:#7BBB55;border-radius:5px;overflow:hidden;position:absolute;top:0;color:#fff;}.operationBox{height:120rpx;width:50px;background-color:#EBEBEB;display:flex;align-items:center;justify-content:center;position:absolute;right:0;top:0;}.operationBoximage{width:50%;height:50%;}