网站维护上海,黔西南州建设银行网站,龙岗区网站制作,产品推广建议文章目录 一、前言二、实现代码三、参考链接 一、前言
在华为快应用中官方提供了slider控件#xff0c;但是这个控件的限制比较多#xff0c;比如滑块无法自定义#xff0c;所以这里进行下自定义#xff0c;自己修改样式。
二、实现代码
整体效果如下: 源码如下… 文章目录 一、前言二、实现代码三、参考链接 一、前言
在华为快应用中官方提供了slider控件但是这个控件的限制比较多比如滑块无法自定义所以这里进行下自定义自己修改样式。
二、实现代码
整体效果如下: 源码如下: custom_slider.ux
templatediv idcontainerdiv idprogress-background/divdiv idprogress-second stylewidth: {{progressSecondWidth}}px/divdiv idslider styleleft: {{left}}px ontouchmovehandleTouchMove/div/div
/templatescriptimport prompt from system.promptexport default {props: [progress,min,max,step],public: {progressSecondWidth: 0,left: 0,right: 0,//右侧可以滑动到的位置containerLeft: 0,containerRight: 0,stepWidth: 1, // 每一步滑动的距离这个根据step值进行计算minDuration: 5, //滑动最小间距,小于这个间距不算滑动},onInit: function () {this.$on(onShow, this.onShow)this.$watch(progress, progressChange)},progressChange(newValue, oldValue) {console.log(progressChange: JSON.stringify(newValue))if(newValue oldValue){return}this.sliderOtherProgress(newValue)},handleTouchMove(e) {let touchX e.touches[0].clientX - this.containerLeft; // 获取触摸点的全局X坐标if (touchX - this.progressSecondWidth -this.minDuration) {this.leftSlide()}if (touchX - this.progressSecondWidth this.minDuration) {this.rightSlide()}this.emitChange()},onShow(e) {let that thisthis.$element(container).getBoundingClientRect({success: function (data) {const { top, bottom, left, right, width, height } data;prompt.showToast({message: getBoundingClientRect结果 width:${width}, height:${height},top:${top}, bottom:${bottom}, left:${left}, right:${right}})that.containerLeft leftthat.containerRight rightthat.right right - left - 40 //40是滑块的宽度that.computerStepWidth()},fail: (errorData, errorCode) {prompt.showToast({message: 错误原因${JSON.stringify(errorData)}, 错误代码${errorCode}})},complete: function () {console.info(complete)}})},//向左滑动leftSlide() {let nextWidth this.progressSecondWidth - this.stepWidthif (nextWidth 0) {nextWidth 0}this.progressSecondWidth nextWidththis.left nextWidth;},//向右滑动rightSlide() {let nextWidth this.progressSecondWidth this.stepWidthif (nextWidth this.right) {nextWidth this.right}this.progressSecondWidth nextWidththis.left nextWidth;},computerStepWidth() {let progressMax 100;let progressMin 0;let progressStep 1;let currentProgress 0;if (this.max) {progressMax this.max}if (this.min) {progressMin this.min}if (this.step) {progressStep this.step}if (this.progress) {currentProgress this.progress}this.stepWidth this.right / (progressMax - progressMin) * progressStep //获取每一步滑动的距离let currentProgressWidth this.stepWidth * currentProgressthis.progressSecondWidth currentProgressWidth},sliderOtherProgress(progress){let nextWidth progress this.stepWidthif (nextWidth this.right) {nextWidth this.right}if (nextWidth 0) {nextWidth 0}this.progressSecondWidth nextWidththis.left nextWidth;this.emitChange()},emitChange() {let progress Math.ceil(this.progressSecondWidth / this.stepWidth)this.$emit(change, {progress})}}
/scriptstyle langless#container {flex-grow: 1;height: 24px;display: flex;}#progress-background {flex-grow: 1;height: 4px;background-color: red;margin-top: 10px;border-radius: 4px;}#progress-second {height: 4px;background-color: pink;margin-top: 10px;border-radius: 4px;left: 0px;position: absolute;}#slider {width: 40px;height: 24px;background-color: #3b2204;position: absolute;border-radius: 12px;}
/style
使用如下:
import namecustom-slider src./custom_slider/import
...
custom-slider onchangeprogressChange progress{{customSliderProgress}}/custom-slider
scriptimport prompt from system.promptexport default {public: {customSliderProgress: 30,},progressChange(evt){console.log(---当前进度,evt.detail.progress);},}
/script ...三、参考链接
touch
