微信小程序实现【点击 滑动 评分 评星(5星)】功能

news2024/9/22 23:38:53

wxml文件:

    <view class="wxpl_xing">
      <view class="manyidu">{{scoreContent}}</view>
      <view>
        <block wx:for='{{scoreArray}}' wx:for-item="item">
          <view class='starLen' bindtap='changeScore' data-sy="{{index}}">
            <image class='star' src="{{score>index?fullStarUrl:nullStarUrl}}" />
          </view>
        </block>
      </view>
    </view>

js文件:

Page({
  data: {
    bsm: '', //标识码
    fullStarUrl: '../../images/fullStar.png', //满星图片
    nullStarUrl: '../../images/nullStar.png', //空星图片
    score: 0, //评价分数
    scoreArray: [0, 1, 2, 3, 4, 5], //5.非常满意,4.满意,3.比较满意,2.一般,1.不满意,0.非常不满意
    scoreText: ['非常不满意', '不满意', '一般', '比较满意', '满意', '非常满意'], //评分列表
    scoreContent: '' //文字显示评分情况
  },
  changeScore: function (e) {
    var that = this;
    var wxsy = e.currentTarget.dataset.sy
    that.setData({
      score: wxsy+1,
      scoreContent: that.data.scoreText[wxsy]
    }) 
  },
})

wxss文件:

.wxpl_xing{ position: fixed; background: #fff; height:240px; bottom: 0px; width: 100%; z-index: 11; display: flex; align-items: center; justify-content: center; flex-direction: column;}
.manyidu{ font-size:28rpx; padding-bottom: 30rpx; height: 40rpx; line-height: 40rpx;}
.starLen{margin-right:10px;display:inline-block}
.star{width:30px;height:30px;vertical-align:text-bottom;display:inline-block}
.scoreContent{margin-left:100px;display:inline-block}

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

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

相关文章

微机原理_2

一、单项选择题(本大题共15小题,每小题3分,共45分。在每小题给出的四个备选项中,选出一个正确的答案&#xff0c;请将选定的答案填涂在答题纸的相应位置上。&#xff09; 下列数中最大的数为&#xff08;&#xff09; A. 10010101B B. (126)8 C. 96H D. 100 CPU 执行 OUT 60H,…

【Java 进阶篇】Redis 命令操作:轻松掌握基本操作

Redis是一款高性能的键值对存储系统&#xff0c;以其快速、灵活的特性而备受开发者推崇。本文将详细介绍Redis的基本命令操作&#xff0c;包括键值操作、数据查询、事务处理等方面&#xff0c;帮助初学者更好地理解和使用Redis。 基本命令 1. 键值操作 1.1 SET&#xff1a;设…

Redis的性能,哨兵模式,集群,

Redis的性能管理; redis的数据保存在内存中 redis-cli info memory redis内存使用info memory命令参数解析 used_memory:236026888 由 Redis 分配器分配的内存总量&#xff0c;包含了redis进程内部的开销和数据占用的内存&#xff0c;以字节&#xff08;byte&#xff09…

CentOS虚拟机重置账号密码

虚拟机忘记密码了 一般来说&#xff0c;虚拟机的账号密码&#xff0c;工作中都会有文档记录&#xff0c;如果忘记了可以查看文档。但是也有特例&#xff0c;虚拟机的密码没有记录到文档中&#xff0c;尝试了很多次依然登录失败&#xff0c;这时候就只能重置账号密码了。 1.重…

61 权限提升-RedisPostgre令牌窃取进程注入

目录 演示案例:Redis数据库权限提升-计划任务PostgreSQL数据库权限提升Windows2008&7令牌窃取提升-本地Windows2003&10进程注入提升-本地pinjector进程注入工具针对-win2008以前操作系统pexec64 32进程注入工具针对-win2008及后操作系统- (佛系) 涉及资源: postgersql是…

配置华为云镜像加速器

登录华为云官网&#xff0c;点击控制台 在服务列表里面寻找swr服务 点击镜像中心&#xff0c;点击镜像加速器 {"registry-mirrors": [ "https://301dc05233c6419b810bdb22135af9eb.mirror.swr.myhuaweicloud.com" ]}配置镜像加速器 vim /etc/docker…

数据提取PDF SDK的对比推荐

PDF 已迅速成为跨各种平台共享和分发文档的首选格式&#xff0c;它作为一种数据来源&#xff0c;常见于公司的各种报告和报表中。为了能更好地分析、处理这些数据信息&#xff0c;我们需要检测和提取 PDF 中的数据&#xff0c;并将其转换为可用且有意义的格式。而数据提取的 PD…

基于Python实现汽车销售数据可视化+预测【500010086.1】

导入模块 import numpy as np import pandas as pd from pylab import mpl import plotly.express as px import matplotlib.pyplot as plt import seaborn as sns设置全局字体 plt.rcParams[font.sans-serif][kaiti]获取数据 total_sales_df pd.read_excel(r"./data/中…

【Web题】狼追兔问题

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

CSS特效017:球体涨水的效果

CSS常用示例100专栏目录 本专栏记录的是经常使用的CSS示例与技巧&#xff0c;主要包含CSS布局&#xff0c;CSS特效&#xff0c;CSS花边信息三部分内容。其中CSS布局主要是列出一些常用的CSS布局信息点&#xff0c;CSS特效主要是一些动画示例&#xff0c;CSS花边是描述了一些CSS…

基于遗传优化的多属性判决5G-Wifi网络切换算法matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 MATLAB2022a 3.部分核心程序 .......................................................................... %接收功率、网…

Python中match-case语法: 引领新的模式匹配时代

更多Python学习内容&#xff1a;ipengtao.com Python在其最新的版本中引入了match-case语法&#xff0c;这是一项强大的功能&#xff0c;为开发者提供了更加灵活和直观的模式匹配方式。本文将深入探讨match-case的各个方面&#xff0c;并通过丰富的示例代码&#xff0c;帮助大家…

MES管理系统与自动化系统如何实现相辅相成

随着科技的飞速发展&#xff0c;制造企业正面临着数字化转型的巨大挑战与机遇。在这一过程中&#xff0c;自动化系统无疑扮演了重要角色&#xff0c;然而&#xff0c;仅仅依赖自动化系统还不足以支撑起整个数字化转型的大厦。这就是为什么我们需要推行MES管理系统解决方案的原因…

【数字信号处理】傅里叶变换的离散性与周期性

傅里叶变换的离散性与周期性 2023年11月21日 #elecEngeneer 文章目录 傅里叶变换的离散性与周期性1. 符号说明2. 具体分析3. 序列的序号表示的DFT下链 1. 符号说明 t : 连续时间(时域)变量 ω : 频域变量&#xff0c;aka角频率 g : 时域函数 G : 频域函数 n : 时域采样序列序号…

Go iota简介

当声明枚举类型或定义一组相关常量时&#xff0c;Go语言中的iota关键字可以帮助我们简化代码并自动生成递增的值。本文档将详细介绍iota的用法和行为。 iota关键字 iota是Go语言中的一个预定义标识符&#xff0c;它用于创建自增的无类型整数常量。iota的行为类似于一个计数器…

vue3 终端实现 (vue3+xterm+websocket)

目录 一、xterm介绍 二、效果展示 三、vue文件实现代码 一、xterm介绍 xterm是一个使用 TypeScript 编写的前端终端组件&#xff0c;可以直接在浏览器中实现一个命令行终端应用&#xff0c;通常与websocket一起使用。 二、效果展示 三、vue文件实现代码 <template>…

网络安全如何自学?

1.网络安全是什么 网络安全可以基于攻击和防御视角来分类&#xff0c;我们经常听到的 “红队”、“渗透测试” 等就是研究攻击技术&#xff0c;而“蓝队”、“安全运营”、“安全运维”则研究防御技术。 2.网络安全市场 一、是市场需求量高&#xff1b; 二、则是发展相对成熟…

操作系统发展过程--单道批处理系统、多道批处理系统、分时系统、实时系统

一、单道批处理系统 计算机早期&#xff0c;为了能提高利用率&#xff0c;需要尽量保持系统的连续运行&#xff0c;即在处理完一个作业之后&#xff0c;紧接着处理下一个作业&#xff0c;以减少机器的空闲等待时间 1.单道批处理系统的处理过程 为了实现对作业的连续处理&…

Ubuntu开机显示No bootable devices found

Ubuntu开机报错&#xff0c;显示显示No bootable devices found&#xff0c;如下图所示&#xff1a; 解决方案如下&#xff1a; 1. F2进入BIOS (1) 重启开启&#xff0c;按F2进入BIOS系统。 (2) 进入Boot Sequence&#xff0c;目前系统选择了UEFI&#xff0c;而Legacy选项为…

学习.NET验证模块FluentValidation的基本用法(续1:其它常见用法)

FluentValidation模块支持链式验证方法调用&#xff0c;也就是说&#xff0c;除了 RuleFor(r > r.UserName).NotEmpty()调用方式之外&#xff0c;还可以将对单个属性的多种验证函数以链式调用方式串接起来&#xff0c;比如UserName属性不能为空&#xff0c;长度在5~10之间&a…