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

devtools/2024/10/20 19:53:20/

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


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;}
}

http://www.ppmy.cn/devtools/124687.html

相关文章

【MySQL】常见的SQL优化方式(二)

目录 1、limit 优化 &#xff08;1&#xff09;延迟关联&#xff08;索引覆盖子查询&#xff09; &#xff08;2&#xff09; 已知位置查询 2、group by 优化 &#xff08;1&#xff09;使用索引 &#xff08;2&#xff09;避免排序 &#xff08;3&#xff09;分析查询 …

Ping32引领数据防泄漏新潮流:智能、高效、安全

在当今数字化迅猛发展的时代&#xff0c;企业面临着日益严峻的数据安全挑战。数据泄漏事件频发&#xff0c;不仅损害企业声誉&#xff0c;还可能导致巨额的经济损失。为此&#xff0c;Ping32以其创新的数据防泄漏解决方案&#xff0c;正在引领行业新潮流。其技术特点可概括为“…

ssm基于SSM框架的餐馆点餐系统的设计+VUE

系统包含&#xff1a;源码论文 所用技术&#xff1a;SpringBootVueSSMMybatisMysql 免费提供给大家参考或者学习&#xff0c;获取源码请私聊我 需要定制请私聊 目 录 摘要 I Abstract II 1绪论 1 1.1研究背景与意义 1 1.1.1研究背景 1 1.1.2研究意义 1 1.2国内外研究…

web框架 django基础-1

bs&cs 常见的软件架构有bs架构和cs架构。 1、工作原理 C/S结构,即Client/Server(客户机/服务器)结构,客户端负责发送请求和处理一部分业务逻辑,服务器端负责处理主要业务逻辑、数据存储和检索。客户端通常需要安装专用的软件。例如:QQ、Pycharm、网易云音乐(安装在…

MySQL8.0 新特性innodb dedicated Server详解

innodb_dedicated_server 是 MySQL 8.0 引入的一个新特性&#xff0c;旨在简化 InnoDB 相关参数的配置&#xff0c;以适应不同规模的服务器资源。这个特性通过自动调整一些关键的 InnoDB 参数来优化性能&#xff0c;使得数据库管理员&#xff08;DBA&#xff09;可以更轻松地管…

【分布式微服务云原生】探索Redis:数据结构的艺术与科学

摘要 本文深入探讨了Redis中的数据结构及其底层实现&#xff0c;旨在帮助开发者理解每种数据结构的特性和适用场景。通过实际的Java代码示例和流程图&#xff0c;读者将能够直观地理解如何高效地使用Redis来优化他们的应用程序。 关键词 Redis, 数据结构&#xff0c;底层实现&…

watch-代码片段

watch-代码片段 1.代码 1.代码 记录下一段代码 <script setup> import { ref, watch } from vueconst id ref(1) let currentRequestId 0// 模拟异步请求 function fetchData(requestId, newId) {return new Promise((resolve) > {setTimeout(() > {resolve({ …

ChatGPT全新功能Canvas上线:开启智能编程与写作新篇章

引言 随着人工智能技术的迅猛发展&#xff0c;OpenAI旗下的明星产品ChatGPT不断推出创新功能&#xff0c;以满足用户在各个领域的需求。2024年10月3日&#xff0c;OpenAI正式宣布了ChatGPT的全新功能——Canvas。这一功能基于先进的GPT-4o模型开发&#xff0c;为用户提供了一个…