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

微信小程序 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.hqwc.cn/news/234487.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于springboot实现的在线考试系统

一、系统架构 前端&#xff1a;html | js | css | jquery | bootstrap 后端&#xff1a;springboot | springdata-jpa 环境&#xff1a;jdk1.7 | mysql | maven 二、 代码及数据库 三、功能介绍 01. 登录页 02. 管理员端-课程管理 03. 管理员端-班级管理 04. 管理员端-老师管理…

使用SpringBoot和ZXing实现二维码生成与解析

一、ZXing简介 ZXing是一个开源的&#xff0c;用Java实现的多种格式的1D/2D条码图像处理库。它包含了用于解析多种格式的1D/2D条形码的工具类&#xff0c;目标是能够对QR编码&#xff0c;Data Matrix, UPC的1D条形码进行解码。在二维码编制上&#xff0c;ZXing巧妙地利用构成计…

CentOS 7安装Java 8

前言 这是我在这个网站整理的笔记,有错误的地方请指出&#xff0c;关注我&#xff0c;接下来还会持续更新。 作者&#xff1a;神的孩子都在歌唱 要在CentOS 7上安装Java 8&#xff0c;请按照以下步骤操作&#xff1a; 打开终端并以root身份登录。 更新系统软件包&#xff1a; …

设计模式-创建型模式之工厂设计模式

文章目录 五、工厂方法六、抽象工厂 五、工厂方法 工厂方法&#xff0c;使用工厂可以像使用人员屏蔽对象创建的细节&#xff0c;使用者无需指定具体的类即可使用功能&#xff0c;达到信息隐蔽的作用&#xff0c;便于后期的维护&#xff0c;修改和扩展。 在看工厂方法前还有一…

前端项目环境的搭建

一、下载并且安装Node&#xff08;不安装node&#xff0c;就安装nvm。nvm安装教程&#xff09;&#xff1a; 1.官网下载Node&#xff1a;https://nodejs.org/en/ 2.测试nodejs安装是否成功&#xff1a; 在windows powerShell中输入node -v 和 npm -v&#xff0c;看到版本号就…

从原理和公式出发:python实现One_Way_ANOVA

文章目录 目的&#xff1a;python实现one way ANOVA 单因素方差分析1. 代码流程2. python代码实现0 主要的函数1 加载数据2 查看数据统计结果3 数据处理及可视化4 方差分析4.1 模型拟合4.2 单因素方差分析 5 Post Hoc t-test组间比较分析6 根据定义自行分解计算对比调用函数的结…

从零开始:打造自己的抖音核销工具小程序

对于商家而言&#xff0c;如何高效核销活动中的抖音优惠券成为一项挑战。在这篇文章中&#xff0c;我们将探讨如何从零开始&#xff0c;打造一个个性化、高效的抖音核销工具小程序。 第一步&#xff1a;明确需求和目标 在动手之前&#xff0c;我们需要明确自己的需求和目标。…

CAD精品Eyeshot Fem 2023.3.630 -2023-11-05 Crack

2023.3.630 更新25天前 分享 跟随还没有人关注 改进的 Brep.TransformBy() 方法修复了工具栏内存泄漏修复了 glTF 材质导出期间的异常改进了 glTF 材质金属粗糙度设置修复了渐进式绘图和剪辑平面的错误在 Workspace.UseShaders 属性设置器中添加了缺少的 RenderContext.MakeCur…

JavaScript 的发展史你真的了解吗?

在不断发展的软件开发领域中&#xff0c;很少有编程语言像 JavaScript 一样产生深远的影响。它起初只是一种简单的脚本语言&#xff0c;但如今已成为现代 Web 的驱动力量&#xff0c;改变了应用构建和体验的方式。本文将带你沿着时间线&#xff0c;穿越 JavaScript 的演进历程&…

ffmpeg开发 环境配置

ffmpeg开发简图 1 下载ffmpeg开发包 https://ffmpeg.org/download.html 包含三个版本&#xff1a;Static、Shared以及Dev Static --- 包含3个应用程序&#xff1a;ffmpeg.exe , ffplay.exe , ffprobe.exe&#xff0c;体积都很大&#xff0c;相关的DLL已经被编译到exe里面去…

ClassCMS2.4漏洞复现

ClassCMS2.4漏洞复现 环境搭建 任意文件下载漏洞复现 漏洞成因 ClassCMS2.4漏洞复现 CMS源码在附件中 环境搭建 使用phpstudy2016搭建web环境&#xff0c;php版本为5.5 安装CMS 这里选择Mysql数据库进行安装 用户名和密码都写默认的admin方便记忆 输入完成后点击安装 点…

Redis学习文档

目录 一、概念1、特征2、关系型数据库和非关系型数据库的区别3、键的结构4、Redis的Java客户端5、缓存更新策略5.1、概念5.2、代码 6、缓存穿透6.1、含义6.2、解决办法6.3、缓存空值代码举例6.4、布隆过滤器代码举例 7、缓存击穿7.1、概念7.2、解决办法7.3、互斥锁代码举例7.4、…