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

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.sythat.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.hqwc.cn/news/212536.html

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

相关文章

深度学习技术前沿:探索与挑战

深度学习技术前沿&#xff1a;探索与挑战 一、引言 近年来&#xff0c;深度学习作为人工智能领域的重要分支&#xff0c;取得了令人瞩目的成就。它凭借强大的学习能力和出色的性能&#xff0c;在图像识别、语音识别、自然语言处理等众多任务中展现出巨大潜力。本文将深入探讨深…

Ubuntu安装CUDA驱动

Ubuntu安装CUDA驱动 前言官网安装确认安装版本安装CUDA Toolkit 前言 CUDA驱动一般指CUDA Toolkit&#xff0c;可通过Nvidia官网下载安装。本文介绍安装方法。 官网 CUDA Toolkit 最新版&#xff1a;CUDA Toolkit Downloads | NVIDIA Developer CUDA Toolkit 最新版文档&…

在两个java项目中实现Redis的发布订阅模式

如何在两个java项目中实现Redis的发布订阅模式&#xff1f; 1. Redis简介2. 发布订阅模式介绍3. 实现思路4. 代码实现及详细解释4.1. RedisUtil4.2. Publisher4.3. Subscriber4.4. 运行程序 目录&#xff1a; Redis简介发布订阅模式介绍实现思路代码实现及详细解释 1. Redis简…

Vue3+vite 处理静态资源,解决服务器不显示动态循环img问题

注意&#xff1a; vue2webpack中&#xff0c;通常使用require来动态渲染静态资源。但在vue3vite中&#xff0c;不支持require语法&#xff0c;因此使用require会报undefined&#xff0c;所以官方推荐使用import来动态渲染静态资源。 实现方式动态渲染静态资源 vue2webpack 使…

RabbitMQ 搭建和工作模式

MQ基本概念 1. MQ概述 MQ全称 Message Queue&#xff08;[kjuː]&#xff09;&#xff08;消息队列&#xff09;&#xff0c;是在消息的传输过程中保存消息的容器。多用于分布式系统之间进行通信。 &#xff08;队列是一种容器&#xff0c;用于存放数据的都是容器&#xff0…

力扣每日一题-HTML实体解析器-2023.11.23

力扣每日一题&#xff1a;HTML实体解析器 开篇 这是今天的每日一题&#xff0c;中等难度&#xff0c;只要有耐心&#xff0c;应该是能够写出来的。下面给大家分享我的思路与代码。 题目链接: 1410.HTML实体解析器 题目描述 代码思路 1.创建一个哈希表&#xff0c;把要替换的…

二十四、RestClient操作文档

目录 一、新增文档 1、编写测试代码 二、查询文档 1、编写测试代码 三、删除文档 1、编写测试代码 四、修改文档 1、编写测试代码 五、批量导入文档 批量查询 一、新增文档 1、编写测试代码 SpringBootTest public class HotelDocumentTest {private RestHighLevelC…

如何开启MySQL的慢查询日志

说明&#xff1a;如果需要查看某一条SQL查询速度慢&#xff0c;并对慢的SQL进行优化&#xff0c;那么开启MySQL慢查询日志是一定要做的事情&#xff0c;本文介绍如何开启MySQL的慢查询日志&#xff1b; 查看MySQL慢查询是否开启 首先&#xff0c;输入下面的命令&#xff0c;查…

CP_AUTOSAR分层软件架构内容简介

目录 0、前言1、综述1.1 AUTOSAR应用范围及拓展性1.2 架构总体介绍 0、前言 随着汽车功能需求日益增加&#xff0c;稳定安全的AUTOSAR分层软件架构逐渐作为一个热词呈现在汽车电子软件开发领域。那么AUTOSAR分层软件架构到底包括了哪些内容&#xff1f;架构之间的是什么关系&am…

QtCreator9.02不支持JDK11解决

最终效果 使用Android Studio 下载Android SDK Platform 31与Sources for Android 31 下载Android SDK Build Tools 31.0.0 下载NDK 25.1 ,23.1 ,21.3 重要: 下载Android SDK Command-Line Tools ,选择10.0或者9.0其中一个版本 其它版本不支持JDK11 ,本例选择10.0 下载CMak…

Java项目如何打包成Jar(最简单)

最简单的办法&#xff0c;使用Maven插件&#xff08;idea自带&#xff09; 1.选择需要打包的mudule&#xff0c;点击idea右侧的maven插件 2.clean操作 3.选择需要的其他mudule&#xff0c;进行install操作&#xff08;如果有&#xff09; 4.再次选择需要打包的module&#…

nodejs微信小程序+python+PHP -留学信息查询系统的设计与实现-安卓-计算机毕业设计

目 录 摘 要 I ABSTRACT II 目 录 II 第1章 绪论 1 1.1背景及意义 1 1.2 国内外研究概况 1 1.3 研究的内容 1 第2章 相关技术 3 2.1 nodejs简介 4 2.2 express框架介绍 6 2.4 MySQL数据库 4 第3章 系统分析 5 3.1 需求分析 5 3.2 系统可行性分析 5 3.2.1技术可行性&#xff1a;…