微信小程序 slider 翻转最大和最小值

news2024/11/24 13:50:28

微信小程序 slider 翻转最大和最小值

  • 场景
  • 代码示例
    • index.wxml
    • index.js
    • util.js
  • 参考资料

场景

我想使用 slider 时最左边是 10 最右是 -10
但是想当然的直接改成<slider min="10" max="-10" step="1" /> 并没用。
查了文档和社区也没有现成的解决方案。

代码示例

在这里插入图片描述

index.wxml

<scroll-view class="scroll-area" type="list" scroll-y>
  <view class="intro">翻转 slider 的最大和最小值</view>
  <button type="default">翻转后的值:{{value}}</button>
  <slider bindchanging="sliderChange" bindchange="sliderChange"  show-value="true"
          min="-10" max="10" step="1" value="{{sliderValue}}"/>
</scroll-view>

index.js

const util = require("../utils/util.js");

Page({
  data: {
    sliderValue: 0,
    value: 0,
  },
  onLoad() {
  },
  sliderChange(e){
    let value = util.intervalMapping(e.detail.value, -10, 10, 10, -10);
    this.setData({ value });
  }
})

util.js

/**
 * 区间映射
 * @param {*} value       输入值
 * @param {*} inputBegin  输入起始值
 * @param {*} inputEnd    输入结束值
 * @param {*} outputBegin 输出起始值
 * @param {*} outputEnd   输出结束值
 */
function intervalMapping(value, inputBegin, inputEnd, outputBegin, outputEnd) {
  if( value <= inputBegin ){
    return outputBegin;
  }else if(value >= inputEnd){
    return outputEnd;
  }
  return ((outputEnd - outputBegin) * (value - inputBegin)) / (inputEnd - inputBegin) + outputBegin;
}

/**
 * 区间映射
 * @param {*} value       输入值
 * @param {*} inputBegin  输入起始值
 * @param {*} inputMid    输入中间值
 * @param {*} inputEnd    输入结束值
 * @param {*} outputBegin 输出起始值
 * @param {*} outputMid   输出中间值
 * @param {*} outputEnd   输出结束值
 */
function intervalMappingABC(value, inputBegin, inputMid, inputEnd, outputBegin, outputMid, outputEnd) {
  if( value <= inputBegin ){
    return outputBegin;
  }else if(value == inputMid){
    return outputMid;
  }else if(value >= inputEnd){
    return outputEnd;
  }else if(value < inputMid){
    inputEnd = inputMid;
    outputEnd = outputMid;
  }else if(value > inputMid){
    inputBegin = inputMid;
    outputBegin = outputMid;
  }
  return ((outputEnd - outputBegin) * (value - inputBegin)) / (inputEnd - inputBegin) + outputBegin;
}

module.exports = {
  intervalMapping,
  intervalMappingABC
}

参考资料

微信小程序 表单组件 /slider
代码片段 https://developers.weixin.qq.com/s/jdYlT6m87NNp

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1273519.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

<Linux>(极简关键、省时省力)《Linux操作系统原理分析之存储管理(3)》(16)

《Linux操作系统原理分析之存储管理&#xff08;3&#xff09;》&#xff08;16&#xff09; 5 存储管理5.6 分段存储管理&#xff08;1&#xff09; 地址结构&#xff08;2&#xff09; 段表&#xff08;3&#xff09; 地址变换机构&#xff08;4&#xff09; 存储共享&#x…

自动化测试理论

一、初识自动化测试 概念 软件测试的定义 在规定的条件下对程序进行操作&#xff0c;以发现程序错误&#xff0c;衡量软件质量&#xff0c;并对其是否能满足设计要求进行评估的过程。 自动化测试的定义 把人对软件的测试行为转化为由机器执行测试行为的一种实践&#xff0…

芯片技术探索:了解构芯片的设计与制造之旅

芯片技术探索:了解构芯片的设计与制造之旅 一、引言 随着现代科技的飞速发展,芯片作为信息技术的核心,已经渗透到我们生活的方方面面。从智能手机、电视、汽车到医疗设备和工业控制系统,芯片在各个领域都发挥着至关重要的作用。然而,对于大多数人来说,芯片仍然是一个神秘…

【Flink进阶】-- Flink kubernetes operator 快速入门与实战

1、课程目录 2、课程链接 https://edu.csdn.net/course/detail/38831

发朋友圈的重要性和黄金时间

一、为什么发朋友圈要选择时间发&#xff1f; 1. 增加曝光率&#xff1a;通过定时自动发朋友圈&#xff0c;可以让更多的人看到你的动态。 2. 提高互动率&#xff1a;定时自动发朋友圈可以保持你的朋友圈活跃度&#xff0c;提高与粉丝的互动率。 3. 增强品牌形象&#xff1a…

系统设计面试指南之分布式任务调度

1 简介 任务是需要资源(CPU 时间、内存、存储、网络带宽等)在指定时间内完成的一段计算工作。 通过智能地将资源分配给任务以满足任务级和系统级目标的系统称为任务调度程序。 任务调度程序&#xff1a; 及时决定和分配资源给任务的过程称为任务调度。 当我们在 Facebook 发…

Golang语言基础之切片

概述 数组的长度是固定的并且数组长度属于类型的一部分&#xff0c;所以数组有很多的局限性 func arraySum(x [3]int) int{sum : 0for _, v : range x{sum sum v}return sum } 这个求和函数只能接受 [3]int 类型&#xff0c;其他的都不支持。 切片 切片&#xff08;Slic…

2023长三角(芜湖)人工智能数字生态峰会暨视觉算法大赛颁奖典礼邀您一同参与!

时光荏苒&#xff0c;科技飞速发展&#xff0c;人工智能正在以令人瞩目的速度改变着我们的生活。在这个数字科技的新时代&#xff0c;为促进长三角地区人工智能产业的蓬勃发展&#xff0c;助推数字经济的繁荣&#xff0c;2023长三角&#xff08;芜湖&#xff09;人工智能数字生…

php请求okx接口获取比特币价格数据、k线数据

php请求okx接口获取比特币价格数据 环境配置请求头、签名设置签名配置代理 全部代码 环境 我本地用的是thinkphp框架和guzzle 安装guzzle composer require guzzlehttp/guzzle 配置请求头、签名 我们需要准备api_key&#xff0c;secret_key&#xff0c;passphrase api_key…

软件测试的测试文档怎么编写?

在软件测试中的流程中&#xff0c;测试文档也是一个重要的流程&#xff0c;所以测试人员也需要学习测试文档的编写和阅读。 一定义&#xff1a; 测试文档&#xff08;TestingDocumentation&#xff09;记录和描述了整个测试流程&#xff0c;它是整个测试活动中非常重要的文件。…

预约系统源码解析:打造智能定制化预约服务的技术奇迹

在当今数字化时代&#xff0c;预约系统的重要性日益凸显&#xff0c;而预约系统源码的开放将为各行业带来更加灵活、智能的预约解决方案。本文将深入探讨预约系统源码的技术内幕&#xff0c;为开发者提供实用的代码示例&#xff0c;助力打造智能定制化的预约服务。 技术栈概览…

泛域名SSL证书是什么?泛域名SSL证书价格多少钱?

泛域名SSL证书是一种SSL证书类型&#xff0c;也被称为通配符SSL证书。SSL证书是保护网站数据传输安全及服务器身份可信的数字证书产品&#xff0c;通常绑定域名或IP&#xff0c;配置到网站服务器上。SSL证书根据保护域名数量及域名类型的不同&#xff0c;可以分为单域名SSL证书…

分布式系统:CAP 定理

欢迎来到分布式系统系列。在本文中&#xff0c;我们将学习并理解什么是 CAP 定理。CAP 代表一致性、可用性和分区容错性。当我们谈论CAP定理时&#xff0c;我们主要谈论的是分布式系统。首先&#xff0c;让我们了解一下什么是分布式系统。分布式系统是由运行在单台或多台机器上…

(免费领源码)Python#MySQL图书馆管理系统071718-计算机毕业设计项目选题推荐

摘 要 随着时代的不断更新&#xff0c;社会的不断变换&#xff0c;信息技术的飞速发展&#xff0c;计算机科技技术也逐步走向成熟。图书馆管理系统对于当今社会来说是必不可少的一个信息组成部分&#xff0c;它可以管理大量图书、大量读者、让读者有条不紊的进行借阅图书&#…

易石无代码开发:电商平台连接CRM与客服系统,实现营销自动化

易石无代码开发的优势 易石软件以其强大的无代码开发平台&#xff0c;为电商企业提供了一种全新的业务集成手段。在激烈的市场竞争中&#xff0c;电商平台必须不断优化其运营效率和客户服务质量。易石无需复杂的API开发&#xff0c;通过简单的配置就能实现电商平台与CRM、客服…

Linux Centos系统安装Mysql8.0详解

本文是基于服务器Linux Centos 8.0系统 安装 Mysql8.0真实运维工作实战为例&#xff0c;详细讲解安装的全过程。 1&#xff0c;检查卸载mariadb Mariadb数据库是mysql的分支&#xff0c;mariadb和mysql会有冲突&#xff0c;所以安装Mysql前&#xff0c;首先要检查是否安装了m…

Xilinx FPGA——ISE的UCF时序约束

时序约束是我们对FPGA设计的要求和期望&#xff0c;例如&#xff0c;我们希望FPGA设计可以工作在多快的时钟频率下等等。 设计是要求系统中的每一个时钟都进行时序约束。 一、分组约束语法&#xff08;NET、PIN、INST&#xff09; TNM是最基本的分组约束语法&#xff0c;其语法…

如何去选择合适的线缆测试仪?CAT8网线认证测试

如何去选择合适的线缆测试仪? 如果你是第三方检测单位&#xff0c;系统集成商&#xff0c;或者线缆生产厂家&#xff0c;我个人建议选择福禄克DSX系列无疑是比较保险的做法&#xff0c;因为考虑到福禄克在国内耕耘多年所积累起来的品牌知名度和口碑&#xff0c;选择一款大家都…

又一张图片,还单纯吗-MISC-bugku-解题步骤

——CTF解题专栏—— 题目信息&#xff1a; 题目&#xff1a; 又一张图片&#xff0c;还单纯吗 作者&#xff1a;harry 提示&#xff1a;falg{} 解题附件&#xff1a; 解题思路&#xff1a; ok图片隐写问题&#xff0c;老三样儿&#xff1a;binwalk、010Editor、Stegsolve …

电话销售如何提高成功率

电话销售是一种非常有效的销售方式&#xff0c;睡着通信技术&#xff0c;互联网的发展&#xff0c;现在电话销售已经成为一种重要的销售方式&#xff0c;很多行业和领域都有使用。 虽然最终目的都是为了将产品卖出去&#xff0c;但是对于电话销售来说&#xff0c;前期寻找客户…