uniapp调查问卷评价功能
我本来用的是uniapp官方提供的组件uni-rate组件,但修改成我想要的样式有点麻烦,于是我就自己手写一个,比用组件简单一点;

dom结构
<text class="formTit must">请您对本次活动进行评价</text>
<view class="evaluate mb-40rpx"><view class="row" v-for="(val, index) in starName" :key="index"><view class="progress" :class="star > index ? 'selected' : ''" @click="setStar(index + 1)"> </view><text class="tit" :class="star == index + 1 ? 'active' : ''">{{ val }}</text></view>
</view>
js部分
// 评价
const star = ref(2); //评价,默认2星
const starName = ["差", "一般", "较好", "好"];
const setStar = (val: any) => {star.value = val;
};
css部分(我用的是scss + tailwindcss,不懂的可以去看看,很方便,写入类名就可以改变样式)
.formTit {@apply block text-#363A44 text-32rpx font-bold mb-20rpx mt-40rpx;}.must {&::after {font-size: 32rpx;color: #f00;content: "*";}
}
.evaluate {@apply w-full flex justify-between items-center;.row {@apply w-full flex flex-col justify-center items-center;width: calc((100% - 6rpx) / 4);&:nth-of-type(1) {.progress {border-radius: 12rpx 0 0 12rpx;}}&:nth-of-type(4) {.progress {border-radius: 0 12rpx 12rpx 0;}}}.progress {@apply w-full bg-#eef5ff h-40rpx;}.selected {background-color: #428ffc;}.tit {@apply w-full text-32rpx text-#9B9B9B text-center pt-20rpx;}.active {@apply text-#363a44 font-bold;color: #363a44;}}
相关文章:
uniapp调查问卷评价功能
我本来用的是uniapp官方提供的组件uni-rate组件,但修改成我想要的样式有点麻烦,于是我就自己手写一个,比用组件简单一点; dom结构 <text class"formTit must">请您对本次活动进行评价</text> <view cl…...
Centos Linux带进度条复制(同步)文件和文件夹
centos linux 内建文件复制/备份命令 rsync 目的:我想从一个磁盘复制一堆文件到另一个磁盘,不希望改变文件的属性(尤其是所有者、还有创建时间、修改时间),最好还得能给我显示进度条。文件太多了,好几百GB…...
从数据仓库到数据结构:数据架构的演变之路
在上个世纪,从电子商务巨头到医疗服务机构和政府部门,数据已成为每家组织的生命线。有效地收集和管理这些数据可以为组织提供宝贵的洞察力,以帮助决策,然而这是一项艰巨的任务。 尽管数据很重要,但CIOinsight声称&…...
kafka-2.12使用记录
kafka-2.12使用记录 安装kafka 2.12版本 下载安装包 根据你的系统下载rpm /deb /zip包等等, 这里我使用的是rpm包 安装命令 rpm -ivh kafka-2.12-1.nfs.x86_64.rpm启动内置Zookeeper 以下命令要写在同一行上 /opt/kafka-2.12/bin/zookeeper-server-start.sh /opt/kafka-2…...
C++笔记之将定时器加入向量并设置定时器的ID为i
C笔记之将定时器加入向量并设置定时器的ID为i code review! 文章目录 C笔记之将定时器加入向量并设置定时器的ID为i关于代码中的void operator()() 运行 代码 #include <chrono> #include <iostream> #include <thread> #include <vector>// 定义定时…...
将一组元素四舍五入到指定精度(小数位数)numpy.around()
【小白从小学Python、C、Java】 【计算机等级考试500强双证书】 【Python-数据分析】 将一组元素四舍五入 到指定精度(小数位数) numpy.around() [太阳]选择题 关于以下代码说法错误的一项是? import numpy as np anp.array([21.3,9.67,8.5, -1.13, -2.67]) print(【显示】a为…...
tinyint这个值在MySQL中的值有哪些
在MySQL中,TINYINT是一种整数数据类型,用于存储小范围的整数值。它占用1个字节的存储空间,可以表示的值范围是从-128到127(有符号)或者从0到255(无符号)。 以下是在MySQL中使用TINYINT数据类型…...
JVM 内存结构
1、方法区(线程共享) 存储静态变量(静态方法、变量、代码块)、常量池、类信息 2、堆信息(线程共享) 存储实例对象,例如 new 出来的对象信息 A a1 new A() 3、虚拟机栈(线程隔离) 每个线程的都有…...
基于百度语音识别API智能语音识别和字幕推荐系统——深度学习算法应用(含全部工程源码)+测试数据集
目录 前言总体设计系统整体结构图系统流程图 运行环境模块实现1. 数据预处理2. 翻译3. 格式转换4. 音频切割5. 语音识别6. 文本切割7. main函数 系统测试工程源代码下载其它资料下载 前言 本项目基于百度语音识别API,结合了语音识别、视频转换音频识别以及语句停顿…...
数字万用表测量基础知识--使用DMM测量电流
概览 DMM(即数字万用表)是一种电气测试和测量仪器,可测量直流和交流信号的电压、电流和电阻。本文介绍如何正确使用和理解数字万用表(DMM)。 使用DMM测量电流 另一个常见的测量功能是直流和交流电流测量。电压是通过与电路并联进行测量&am…...
【BASH】回顾与知识点梳理(二十)
【BASH】回顾与知识点梳理 二十 二十. 十六至十九章知识点总结及练习20.1 总结20.2 练习 该系列目录 --> 【BASH】回顾与知识点梳理(目录) 二十. 十六至十九章知识点总结及练习 20.1 总结 shell script 是利用 shell 的功能所写的一个『程序 (prog…...
Arduino驱动SGP40空气质量传感器(气体传感器篇)
目录 1、传感器特性 2、硬件原理图 3、控制器和传感器连线图 4、驱动程序 SGP40空气质量传感器是业内知名的瑞士公司Sensirion推出的新一代SGP40数字VOC传感器芯片。基于Sensirion的CMOSens技术,SGP40在单个芯片上提供了完整的传感器系统,包括温控微加热板和室内空气质量…...
识别和应对内存抖动
关于作者:CSDN内容合伙人、技术专家, 从零开始做日活千万级APP。 专注于分享各领域原创系列文章 ,擅长java后端、移动开发、人工智能等,希望大家多多支持。 目录 一、导读二、概览三、案例分析3.1 使用memory-profiler3.2 使用 cp…...
3.3用于共享数据保护的替代工具
用于共享数据保护的替代工具 虽然互斥元是最通用的机制,但提到保护共享数据时,它们并不是唯一的选择;还有别的替代品,可以在特定情况下提供更恰当的保护。 一个特别极端(但却相当常见)的情况,…...
探索数据之美:初步学习 Python 柱状图绘制
文章目录 一 基础柱状图1.1 创建简单柱状图1.2 反转x和y轴1.3 数值标签在右侧1.4 演示结果 二 基础时间线柱状图2.1 创建时间线2.2 时间线主题设置取值表2.3 演示结果 三 GDP动态柱状图绘制3.1 需求分析3.2 数据文件内容3.3 列表排序方法3.4 参考代码3.5 运行结果 一 基础柱状图…...
647. 回文子串
boolean默认类型是false class Solution {public int countSubstrings(String s) {if(s null) return 0;int result 0;int length s.length();boolean[][] dp new boolean[length][length];for(int j0;j<length;j){for(int i0;i<j;i){if(s.charAt(i) s.charAt(j)){i…...
cmake (更新中)
概述 关于 CMake CMake 是一个可扩展的开源系统,以一种与操作系统和编译器无关的方式来管理构建过程。与许多跨平台系统不同,CMake 被设计为与本机构建环境配合使用。在每个源代码目录中放置简单的配置文件(称为 CMakeLists.txt 文件…...
【go语言基础】指针数组和数组指针
1.概念 (1)指针数组: 存储指针的数组,也叫存储地址的数组,简单说就是存储地址的。 首先它是一个数组,数组中的元素都是指针(地址)。 (2)数组指针…...
ModaHub魔搭社区——Milvus Cloud向量数据库
向量数据库:在AI时代的快速发展与应用 摘要: 随着人工智能技术的不断进步,向量数据库在处理大规模数据方面发挥着越来越重要的作用。本文介绍了向量数据库的基本概念、应用场景和技术挑战,并详细阐述了Milvus Cloud作为典型的向量数据库产品的技术特点、性能优化和应用案例…...
【Java】常用Stream API
常见 Stream 流表达式 总体结构图 一、两大类型 中间操作(Intermediate Operations) 中间操作是指在Stream上执行的操作, 它们返回一个新的Stream, 允许你链式地进行多个中间操作. 终端操作(Terminal Operations) 对Stream进行最终处理的操作, 当调用终端操作时, Stream会开始执…...
STM32单片机低功耗模式与应用实践
1. STM32单片机低功耗模式深度解析作为一名嵌入式开发者,我经常遇到需要优化功耗的场景。STM32系列单片机提供了多种低功耗模式,合理使用这些模式可以显著延长电池供电设备的续航时间。本文将结合我多年的实战经验,详细剖析STM32F10xx系列的低…...
ESPDateTime:面向ESP32/ESP8266的轻量级NTP时间同步库
1. 项目概述 ESPDateTime 是一款专为 ESP8266 和 ESP32 平台设计的轻量级日期时间管理库,其核心目标并非替代 POSIX time.h 的完整实现,而是解决嵌入式物联网设备在资源受限、无 RTC 硬件备份、网络连接不稳定等现实约束下, 可靠获取、同…...
靠两台电脑,月入10万,一个中年人的实战分享
阿阳到底是谁?凭什么能做到 月入10万 ?先跟大家说个实话啊,我不是什么大牛,也没啥 光 环。我就是个普通人,普通的家庭,普通的脑子,普通的起点。唯一不普通的,可能就是——我辞职得比…...
高光谱成像基础(完)光谱融合(Spectral Fusion)肆
环境安装 pip install keystone-engine capstone unicorn 这3个工具用法极其简单,下面通过示例来演示其用法。 Keystone 示例 from keystone import * CODE b"INC ECX; ADD EDX, ECX" try:ks Ks(KS_ARCH_X86, KS_MODE_64)encoding, count ks.asm(CODE)…...
微信聊天记录导出终极指南:如何快速安全备份你的珍贵回忆
微信聊天记录导出终极指南:如何快速安全备份你的珍贵回忆 【免费下载链接】WeChatExporter 一个可以快速导出、查看你的微信聊天记录的工具 项目地址: https://gitcode.com/gh_mirrors/wec/WeChatExporter 你是否曾经因为手机丢失或系统升级,担心…...
Aseprite新手必看:5分钟搞定像素角色基础动画(附完整工程文件)
Aseprite像素动画速成指南:从静态角色到生动动作的5分钟魔法 第一次打开Aseprite时,我被它简洁的界面和强大的功能震撼了——作为一个独立游戏开发者,我需要快速制作角色动画,但又不想陷入复杂的美术流程。经过多次实践ÿ…...
2026年高性价比降AI工具:SpeedAI降AIGC率稳过审
2026年AIGC工具已经全面融入各类内容创作场景,降AI率、降AIGC率不再是学术圈的小众需求,更是论文写作、商业文案产出、自媒体内容创作、正式文稿发表等场景的核心刚需。现在市面上降AI工具种类繁多,但真正能做到效果稳定、不改动核心内容、操…...
副业月入五万:软件测试从业者的知识变现全路径
引言:测试人的职业新机遇在AI重构技术生态的2026年,软件测试工程师正站在职业转型的黄金节点。行业数据显示,76%的资深测试人员通过副业实现收入倍增,其中15%的顶尖者突破月入五万门槛。本指南从专业视角拆解四大变现路径…...
【hudi学习笔记】深入解析Hudi表设计:核心组件与高效索引机制
1. Hudi表设计的核心组件解析 第一次接触Hudi表设计时,我被它精巧的架构深深吸引。作为一个处理大规模数据湖的开源框架,Hudi通过三个核心组件构建了高效的数据管理机制,这就像建造一栋房子需要稳固的地基、承重墙和屋顶一样缺一不可。 时间轴…...
MCP与CLI之争:AI Agent的协议之辩
MCP vs CLI:AI Agent 的协议之辩 2026年2月底到3月,AI 开发者社区爆发了一场关于 AI Agent 工具调用方式的激烈争论。一方说"MCP 已死,CLI 万岁",另一方说"MCP 没死,我们只是太早了"。而飞书、钉钉…...
