移动端网页模板：小程序双向调节的Slider滑块，速度get

干货的重点就是干，直接上代码：

一、html内容

view.slider
 view.time-line
 em.min(@touchstart.stop="minTouchStart" @touchmove.stop="minTouchMove" animation="{{minAnimationData}}")
 view#line.line
 em.max(@touchstart.stop="maxTouchStart" @touchmove.stop="maxTouchMove" animation="{{maxAnimationData}}")
 view.time-num
 view.flex1 {{startStepStr}}
 view.flex1 {{endStepStr}}

二、 js内容 1. 定义变量

minAnimationData: '', // 左侧滑块动画
maxAnimationData: '', // 右侧滑块动画
startX: '', // 左侧滑块 开始滑动距离左侧距离
endX: '', // 右侧滑块 开始滑动距离左侧距离
step: '', // 滑竿线可以每块多少像素 如总长240px 分成24块，每块240/23像素，为什么是23？大家自己思考咯，可以留言
intervalStart: 0, // 滑块起点
intervalEnd: 24, // 滑块终点
startStep: 0, // 左侧滑块初始位置
endStep: 24, // 右侧滑块初始位置
startStepStr: '00:00', // 左侧时间转换
endStepStr: '24:00', // 右侧时间转换
amountW: '', // 滑竿多长距离

2. 事件

/**
 *左侧滑块 touchStart 事件，计算滑竿的长度，并计算每块多少px（用于动画）
minTouchStart(e) {
 let vm = this;
 vm.getElement((data) = {
 vm.amountW = data.width - 25;
 vm.startX = data.left; // 开始滑动时滑块的位置
 vm.step = vm.amountW / (vm.intervalEnd - vm.intervalStart - 1); // 总共多少步
 vm.$apply();
 *左侧滑块 touchMove事件
minTouchMove(e) {
 const vm = this;
 let slidedis = e.touches[0].pageX - vm.startX; // 滑动距离=当前滑块x距离-最开始滑块距离
 if (slidedis 0 || slidedis vm.amountW) {
 return;
 let ste = Math.round(slidedis / vm.step); // 滑动距离/每块长度 = 滑动多少块
 if ((ste + vm.intervalStart) = vm.endStep) { // 判断滑动块数是否在起点和右侧滑块之间
 return;
 vm.startStep = ste + vm.intervalStart;
 vm.startStepStr = vm.hoursFilter(vm.startStep); // 时间格式化
 let option = {
 duration: 1,
 timingFunction: 'linear'
 var animationData = wx.createAnimation(option); // 小程序创建动画
 animationData.left(ste * vm.step).step(); // 向左侧滑动多少
 vm.minAnimationData = animationData.export(); // 开始动画
 vm.$apply();
 *右侧滑块 touchStart 事件，计算滑竿的长度，并计算每块多少px（用于动画），没有做初始化操作，所以左侧是否滑动并不知道，后期优化新版本
maxTouchStart(e) {
 let vm = this;
 vm.getElement((data) = {
 vm.amountW = data.width - 12.5;
 vm.endX = e.touches[0].pageX; // 开始滑动时滑块的位置
 if (!vm.startX) {
 vm.startX = data.left;
 vm.step = vm.amountW / (vm.intervalEnd - vm.intervalStart); // 总共多少步
 vm.$apply();
 *右侧滑块 touchMove事件
maxTouchMove(e) {
 let vm = this;
 let slidedis = e.touches[0].pageX - vm.startX; // 滑动距离=当前滑块x距离-最开始滑块距离
 if (slidedis 0 || slidedis vm.amountW) {
 return;
 let ste = Math.round(slidedis / vm.step);
 if (vm.startStep = (ste + vm.intervalStart)) {
 return;
 vm.endStep = ste + vm.intervalStart;
 vm.endStepStr = vm.hoursFilter(vm.endStep);
 let option = {
 duration: 1,
 timingFunction: 'linear'
 var animationData = wx.createAnimation(option);
 if (vm.endStep === 24) {
 animationData.left('none');
 animationData.right(0).step();
 } else {
 animationData.left(ste * vm.step).step();
 vm.maxAnimationData = animationData.export();
 vm.$apply();
},

3. 时间格式化

hoursFilter(date) {
 if (date 10) {
 return '0' + date + ':00';
 } else {
 return date + ':00';
}

4. 小程序获取元素的属性

getElement(cb) {
 // 大家可以去看具体API
 wx.createSelectorQuery().select('#line').boundingClientRect(rect = {
 cb cb(rect);
 }).exec();
}

三、css样式

.slider
 margin: auto
 width 80%
 border-top: 1px solid $c-border-color
 .date
 // overflow: hidden
 color #333
 font-size px2rpx(26px)
 margin-top px2rpx(34px)
 float: left
 float: right
 .ruler
 background #10AF7E
 height 1px
 position relative
 margin-top px2rpx(75px)
 .bar
 position absolute
 top -0.325rem
 height 0.65rem
 width 0.65rem
 border-radius 100%
 background #D8D8D8
 font-size 0.3rem
 line-height 0.65rem
 text-align center
 .startbar
 left 0
 .endbar
 right 0
 background #10AF7E