当前位置：首页 > news >正文

【cocos creator】输入框滑动条联动小组建

news 2025/8/22 13:19:44

在这里插入图片描述
滑动条滑动输入框内容会改变
输入框输入，滑动条位置改变


const { ccclass, property } = cc._decorator;@ccclass()
export default class SliderEnter extends cc.Component {@property({ type: cc.Float, displayName: "最大值", tooltip: "" })public maxNum: number = 100;@property({ type: cc.Float, displayName: "最小值", tooltip: "" })public minNum: number = 0;@property({ type: cc.Float, displayName: "输入框初始值", tooltip: "" })public editBoxStart: number = 0;@property({ type: cc.Float, displayName: "滑动条初始位置", min: 0, max: 1, tooltip: "0～1，支持小数，对应输入框初始值" })sliderStart = 0;@property({ type: cc.Integer, displayName: "保留小数位数", tooltip: "" })public fixTo: number = 0;@property({ type: cc.EditBox, displayName: "输入框", tooltip: "" })public editBox: cc.EditBox = null;@property({ type: cc.Slider, displayName: "滑动条", tooltip: "" })public slider: cc.Slider = null;_sliderStart = 0;_editBoxStart = 0;protected onLoad(): void {this.onResetBtn()// this._sliderStart = this.slider.progress;// this._editBoxStart = this.checkEditBox()this.addHandler(this.slider.slideEvents, this.onSlide, "onSlide", this)this.addHandler(this.editBox.editingDidEnded, this.onSlide, "onEnter", this)}getData() {let num = this.checkEditBox()return num}onResetBtn() {this._sliderStart = this.sliderStart;this._editBoxStart = this.editBoxStartthis.slider.progress = this._sliderStartthis.editBox.string = this.fixForceStr(this._editBoxStart, this.fixTo)}checkEditBox() {let num = this.getInt(this.editBox.string, 0)if (num > this.maxNum) num = this.maxNum;if (num < this.minNum) num = this.minNum;this.editBox.string = num + ""return num;}onEnter() {let num = this.checkEditBox()if (num == this._editBoxStart) {num = this._sliderStart}else if (num <= this._editBoxStart) {this.slider.progress = (num - this.minNum) / (this._editBoxStart - this.minNum) * this._sliderStart}else {this.slider.progress = this._sliderStart + (num - this._editBoxStart) / (this.maxNum - this._editBoxStart) * (1 - this._sliderStart)}}onSlide() {let progress = this.slider.progresslet num = 0if (progress < 0) progress = 0if (progress > 1) progress = 1this.slider.progress = progressif (progress == this._sliderStart) {num = this._editBoxStart}else if (progress <= this._sliderStart) {num = this.minNum + (this._editBoxStart - this.minNum) * progress / this._sliderStart}else {num = this._editBoxStart + (progress - this._sliderStart) * (this.maxNum - this._editBoxStart) / (1 - this._sliderStart)}this.editBox.string = this.fixForceStr(num, this.fixTo)}addHandler(fun: any, handler, fnName = "", scope, eventData = "") {if (!fnName || !scope[fnName]) {fnName = "__BtnClick__" + (Math.random() + "").slice(2, 15);scope[fnName] = handler;}let eventHandler = new cc.Component.EventHandler();eventHandler.target = scope.node;eventHandler.component = cc.js.getClassName(this);eventHandler.handler = fnName;eventHandler.customEventData = eventData;if (typeof (fun) == "object" && cc.isValid(fun.length)) fun.push(eventHandler);return eventHandler}fixForceStr(count, fixTo): string {let a = (count + "").split(".");if (fixTo == 0) return a[0]let b = a[0];if (a.length > 1) b = a[0] + "." + a[1].slice(0, fixTo);if (b == "0.00" || b == "0.0") {return a[0]}return b;}getInt(data, defaultNum) {let num = Number(data)return isNaN(num) ? defaultNum : num;}
}