移动端网页模板

2020-12-30 18:09

移动端网页模板:小程序双向调节的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


扫描二维码分享到微信

在线咨询
联系电话

020-66889888