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

微信小程序,封装身高体重选择器组件

请添加图片描述

wxml代码:

// 微信小程序的插值语法不支持直接使用Math
<wxs src="./ruler.wxs" module="math"></wxs>
<view class="ruler-container"><scroll-view scroll-left="{{scrollLeft}}" enhanced="{{true}}" bounces="{{false}}" scroll-x="true" class="scroll-box" bindscroll="scroll">// 刻度<view class="ruler" style="width: {{(max-min)*6+1}}px;"><view wx:for="{{(max-min)+1}}" wx:key="item" style="display: flex;" class="scale" style="height: {{index%5===0?'20rpx':'12rpx'}};"></view></view>// 刻度值<view class="scale-value" style="width: {{(max-min)*6}}px;"><view class="zero">{{min}}</view><view class="scale-value-item" wx:for="{{math.ceil((max-min)/10)}}" wx:key="item">{{(index+1)*10+min}}</view></view></scroll-view><view class="value-box"><text>{{value}}{{unit}}</text><view class="line"></view></view>
</view>

scrollLeft 保证能选择到最小值和最大值
bounces 关闭ios的回弹效果,回弹之前会有显示复数和大于最大值的情况(也可以不关闭,设置例如:min = val<min?min:val)

宽度:"width: {{(max-min)*6+1}}px;"

6:间隔+刻度的宽度
+1 是额外加一个刻度,这样才完整。

高度:"height: {{index%5===0?'20rpx':'12rpx'}};"

index%5===0: 5的倍数为长刻度,否则为短刻度

wxs代码:

module.exports.ceil = function (val) {return Math.ceil(val);
}

wxs模块文档

ts代码:

Component({properties: {min: {type: Number,value: 0},max: {type: Number,value: 100},unit: {type: String,value: '单位'},defaultValue: {type: Number,value: 0},setvalue:Function},data: {value: 0,cache: 0,scrollLeft: 0},onShow() {const value = this.properties.defaultValuethis.setData({value,scrollLeft: value * 6})},attached() {const { defaultValue, min } = this.propertiessetTimeout(() => {this.setData({value: defaultValue,scrollLeft: (defaultValue - min) * 6})}, 100);},methods: {scroll: function (e: WechatMiniprogram.TouchEvent) {const scrollLeft = e.detail.scrollLeft + 1let value = Math.ceil(scrollLeft / 6)value = value ? value - 1 : valueif (value % 10 === 0 && Math.floor(value / 10) !== this.data.cache) {wx.vibrateShort({ type: 'light' })this.setData({cache: Math.floor(value / 10)})}this.setData({value: value + this.properties.min})this.triggerEvent('setvalue',value + this.properties.min)}}
})

参数:
min:刻度最小值
max:刻度最大值
unit:单位
defaultValue:初始值
setvalue:自定义方法

css代码:

.ruler-container {position: relative;background: #FBFBFB;border-radius: 8rpx;.value-box {position: absolute;left: 50%;transform: translateX(-50%);top: 0;height: 70rpx;z-index: 99999999;width: 100rpx;display: flex;flex-direction: column;align-items: center;color: #46D2A1;font-size: 28rpx;line-height: 40rpx;padding-top: 8rpx;.line {width: 2px;height: 28rpx;background: #46D2A1;}}
}.scroll-box {height: 122rpx;
}.ruler {display: flex;align-items: flex-end;margin-top: 50rpx;padding: 0 50%;.scale {width: 1px;background-color: #C2C2C2;margin-right: 5px;&:last-child{margin-right: 0;}}
}.scale-value {display: flex;padding: 0 50%;position: relative;overflow: hidden;.scale-value-item {color: #C2C2C2;font-size: 22rpx;width: 60px;line-height: 32rpx;text-align: center;&:last-child{width: 30px;transform: translateX(50%);}}.zero{width: 30px;color: #C2C2C2;font-size: 22rpx;line-height: 32rpx;transform: translateX(-50%);text-align: center;}
}

相关文章:

微信小程序,封装身高体重选择器组件

wxml代码&#xff1a; // 微信小程序的插值语法不支持直接使用Math <wxs src"./ruler.wxs" module"math"></wxs> <view class"ruler-container"><scroll-view scroll-left"{{scrollLeft}}" enhanced"{{tru…...

深度学习调参技巧

写完代码—> 小数据上降loss无nan—> 大数据没爆卡速度可以—> 实验log完好可视化loss稳步下降—>回头看实验结果 写完代码后&#xff0c;不要只是在小数据上降loss无nan&#xff0c;还要检查一下模型的输出是否符合预期&#xff0c;比如是否有明显的偏差或者异常值…...

图论基础和表示(Java 实例代码)

目录 图论基础和表示 一、概念及其介绍 二、适用说明 三、图的表达形式 Java 实例代码 src/runoob/graph/DenseGraph.java 文件代码&#xff1a; src/runoob/graph/SparseGraph.java 文件代码&#xff1a; 图论基础和表示 一、概念及其介绍 图论(Graph Theory)是离散数…...

各种数据库查询报错问题

文章目录 前言一、约束条件是自增&#xff0c;不能直接添加数据二、使用步骤1.引入库2.读入数据 总结 前言 记录常见的数据库使用问题&#xff0c;以及对应解决思路 一、约束条件是自增&#xff0c;不能直接添加数据 消息 8101&#xff0c;级别 16&#xff0c;状态 1&#xf…...

人效九宫格城市沙龙暨《人效九宫格白皮书》发布会 —上海站,圆满结束

8月11日&#xff0c;在上海龙之梦万丽酒店&#xff0c;由盖雅工场主办的人效九宫格城市沙龙暨《人效九宫格白皮书》发布会 —上海站&#xff0c;圆满结束。 近百位来自多个行业的企业管理者及人力资源从业者汇聚一堂&#xff0c;共同探讨企业如何将盈利模式从数量增长转为质量增…...

【C语言】文件操作 -- 详解

一、什么是文件 磁盘上的文件是文件。 1、为什么要使用文件 举个例子&#xff0c;当我们想实现一个 “通讯录” 程序时&#xff0c;在通讯录中新建联系人、删除联系人等一系列操作&#xff0c;此时的数据存储于内存中&#xff0c;程序退出后所有数据都会随之消失。为了让通讯录…...

飞天使-k8s基础组件分析-持久化存储

文章目录 emptyDirhostpathpv和pvc介绍nfs作为静态pv案例nfs作为动态pv案例使用本地文件夹作为pv改变默认存储类及回收策略参考文档 emptyDir 重启文件还有&#xff0c;但是如果杀了进程&#xff0c;则会丢失文件 创建pod # kubectl apply –f redis.yaml校验pod是否处于运行&…...

python连接PostgreSQL 数据库

执行如下命令安装 pip3 install psycopg2 python代码 Author: tkhywang 2810248865qq.com Date: 2023-08-21 11:42:17 LastEditors: tkhywang 2810248865qq.com LastEditTime: 2023-08-21 11:51:56 FilePath: \PythonProject02\PostgreSQL 数据库.py Description: 这是默认设置…...

数字图像处理—— Lab、YCbCr、HSV、RGB之间互转

Lab “Lab” 图像格式通常指的是 CIELAB 色彩空间&#xff0c;也称为 Lab 色彩空间。它是一种用于描述人类视觉感知的颜色的设备无关色彩空间&#xff0c;与常见的 RGB 和 CMYK 色彩空间不同。CIELAB 由国际照明委员会&#xff08;CIE&#xff09;于1976年定义&#xff0c;用于…...

自动驾驶SLAM技术第四章习题2

在g2o的基础上改成ceres优化&#xff0c;高博都写好了其他的部分, 后面改ceres就很简单了. 这块我用的是ceres的自动求导&#xff0c;很方便&#xff0c;就是转化为模板仿函数的时候有点麻烦&#xff0c; 代码部分如下 ceres_type.h : ceres优化核心库的头文件 这个文件写的内…...

vue拖拽div盒子实现上下拖动互换

vue拖拽div盒子实现上下拖动互换 <div v-for"(item, index) in formList" :key"index" draggable"true"dragstart"handleDragStart($event, item)"dragenter"handleDragEnter($event, item)"dragover.prevent"han…...

Visual Studio 2022 右键单击项目没有出现View | View Class Diagram(Visual Studio 无法使用类设计器)

文章目录 问题描述原因.NET Core项目.NET Framework项目 问题描述 当我们在Solution Explorer窗口右键单击项目时&#xff0c;快捷菜单中没有出现“查看”&#xff0c;或者出现了“查看”&#xff0c;但是“查看”里没有View Class Diagram。 原因 首先你要确保你安装了类设…...

EFCore常见用法

EFCore官方文档置顶&#xff0c;看这个就行。下面的内容只是总结&#xff0c;算是备忘录。 一、创建和删除 //1、创建数据库和表 db.Database.EnsureCreated();//将创建数据库&#xff08;如果不存在&#xff09;并初始化数据库架构。 如果存在任何表 (包括另一 DbContext 类)…...

概率论与数理统计:第六章:数理统计

文章目录 Ch6. 数理统计(一) 总体与样本(二) 统计量 (5个)2.5个常用统计量3.矩的概念 (三) 抽样分布 (3个)0.上α分位点1.χ分布2.t分布3.F分布 (四) 抽样分布定理1.单个正态总体2.两个正态总体 Ch6. 数理统计 (一) 总体与样本 1.概念&#xff1a; (1)总体 (2)样本 简单随机…...

拥塞控制(TCP限制窗口大小的机制)

拥塞控制机制可以使滑动窗口在保证可靠性的前提下&#xff0c;提高传输效率 关于滑动窗口的属性以及部分机制推荐看TCP中窗口和滑动窗口的含义以及流量控制 拥塞控制出现的原因 看了上面推荐的博客我们已经知道了&#xff0c;由于接收方接收数据的能力有限&#xff0c;所以要通…...

校园供水系统智能管理

import pandas as pd data1pd.read_excel("C://Users//JJH//Desktop//E//附件_一季度.xlsx") data2pd.read_excel("C://Users//JJH//Desktop//E//附件_二季度.xlsx") data3pd.read_excel("C://Users//JJH//Desktop//E//附件_三季度.xlsx") data4…...

Flask-SocketIO和Flask-Login联合开发socketio权限系统

设置 Flask, Flask-SocketIO, Flask-Login: 首先&#xff0c;确保安装了必要的库: pip install Flask Flask-SocketIO Flask-Login基础设置: from flask import Flask, render_template, redirect, url_for, request from flask_socketio import SocketIO, emit from flask_…...

航空电子设备中的TSN通讯架构—直升机

前言 以太网正在迅速取代传统网络&#xff0c;成为航空电子设备和任务系统的核心高速网络。本文提出了以太网时间敏感网络(TSN)在航空电子设备上应用的技术优势问题。在实际应用中&#xff0c;TSN已成为一个具有丰富的机制和协议的工具箱&#xff0c;可满足与时间和可靠性相关…...

elment-ui中使用el-steps案例

el-steps案例 样式 代码 <div class"active-box"><div class"active-title">请完善</div><el-steps :active"active" finish-status"success" align-center><el-step title"第一步" /><…...

FPGA解析串口指令控制spi flash完成连续写、读、擦除数据

前言 最近在收拾抽屉时找到一个某宝的spi flash模块&#xff0c;如下图所示&#xff0c;我就想用能不能串口来读写flash&#xff0c;大致过程就是&#xff0c;串口向fpga发送一条指令&#xff0c;fpga解析出指令控制flah&#xff0c;这个指令协议目前就是&#xff1a; 55 AA …...

在软件开发中正确使用MySQL日期时间类型的深度解析

在日常软件开发场景中&#xff0c;时间信息的存储是底层且核心的需求。从金融交易的精确记账时间、用户操作的行为日志&#xff0c;到供应链系统的物流节点时间戳&#xff0c;时间数据的准确性直接决定业务逻辑的可靠性。MySQL作为主流关系型数据库&#xff0c;其日期时间类型的…...

智慧医疗能源事业线深度画像分析(上)

引言 医疗行业作为现代社会的关键基础设施,其能源消耗与环境影响正日益受到关注。随着全球"双碳"目标的推进和可持续发展理念的深入,智慧医疗能源事业线应运而生,致力于通过创新技术与管理方案,重构医疗领域的能源使用模式。这一事业线融合了能源管理、可持续发…...

golang循环变量捕获问题​​

在 Go 语言中&#xff0c;当在循环中启动协程&#xff08;goroutine&#xff09;时&#xff0c;如果在协程闭包中直接引用循环变量&#xff0c;可能会遇到一个常见的陷阱 - ​​循环变量捕获问题​​。让我详细解释一下&#xff1a; 问题背景 看这个代码片段&#xff1a; fo…...

基于服务器使用 apt 安装、配置 Nginx

&#x1f9fe; 一、查看可安装的 Nginx 版本 首先&#xff0c;你可以运行以下命令查看可用版本&#xff1a; apt-cache madison nginx-core输出示例&#xff1a; nginx-core | 1.18.0-6ubuntu14.6 | http://archive.ubuntu.com/ubuntu focal-updates/main amd64 Packages ng…...

css的定位(position)详解:相对定位 绝对定位 固定定位

在 CSS 中&#xff0c;元素的定位通过 position 属性控制&#xff0c;共有 5 种定位模式&#xff1a;static&#xff08;静态定位&#xff09;、relative&#xff08;相对定位&#xff09;、absolute&#xff08;绝对定位&#xff09;、fixed&#xff08;固定定位&#xff09;和…...

大数据学习(132)-HIve数据分析

​​​​&#x1f34b;&#x1f34b;大数据学习&#x1f34b;&#x1f34b; &#x1f525;系列专栏&#xff1a; &#x1f451;哲学语录: 用力所能及&#xff0c;改变世界。 &#x1f496;如果觉得博主的文章还不错的话&#xff0c;请点赞&#x1f44d;收藏⭐️留言&#x1f4…...

Java多线程实现之Thread类深度解析

Java多线程实现之Thread类深度解析 一、多线程基础概念1.1 什么是线程1.2 多线程的优势1.3 Java多线程模型 二、Thread类的基本结构与构造函数2.1 Thread类的继承关系2.2 构造函数 三、创建和启动线程3.1 继承Thread类创建线程3.2 实现Runnable接口创建线程 四、Thread类的核心…...

#Uniapp篇:chrome调试unapp适配

chrome调试设备----使用Android模拟机开发调试移动端页面 Chrome://inspect/#devices MuMu模拟器Edge浏览器&#xff1a;Android原生APP嵌入的H5页面元素定位 chrome://inspect/#devices uniapp单位适配 根路径下 postcss.config.js 需要装这些插件 “postcss”: “^8.5.…...

安宝特案例丨Vuzix AR智能眼镜集成专业软件,助力卢森堡医院药房转型,赢得辉瑞创新奖

在Vuzix M400 AR智能眼镜的助力下&#xff0c;卢森堡罗伯特舒曼医院&#xff08;the Robert Schuman Hospitals, HRS&#xff09;凭借在无菌制剂生产流程中引入增强现实技术&#xff08;AR&#xff09;创新项目&#xff0c;荣获了2024年6月7日由卢森堡医院药剂师协会&#xff0…...

uniapp 开发ios, xcode 提交app store connect 和 testflight内测

uniapp 中配置 配置manifest 文档&#xff1a;manifest.json 应用配置 | uni-app官网 hbuilderx中本地打包 下载IOS最新SDK 开发环境 | uni小程序SDK hbulderx 版本号&#xff1a;4.66 对应的sdk版本 4.66 两者必须一致 本地打包的资源导入到SDK 导入资源 | uni小程序SDK …...