微信小程序实现【点击 滑动 评分 评星(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.mzph.cn/news/165189.shtml

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

相关文章

vuex中的常用属性有哪些?

在 Vuex 中&#xff0c;有一些常用的属性可以帮助你管理应用程序的状态。这些属性包括 state、getters、mutations 和 actions。 state: 用于存储应用程序的状态数据&#xff0c;是 Vuex 存储数据的地方。当应用程序中的多个组件需要共享状态时&#xff0c;就可以将这些共享的状…

力扣283:移动零(JAVA)

题目描述: 意思是将所有0移到最后的同时其余非0元素位置仍然不变 如 1 2 0 5 2 0 经过移动零后变为 1 2 5 2 0 0 思路:使用双指针的思路来写 fast:从左往右遍历数组 slow:非零元素最后的一个位置 将数组分为3个区间 [0,slow]为处理好的非0数据,slow永远指向最后一个非0数据 [s…

Java面向对象第一天

什么是类&#xff1f;什么是对象&#xff1f; 现实生活是由很多很多对象组成的&#xff0c;基于对象抽出了类 对象&#xff1a;软件中真实存在的单个的个体/东西 类&#xff1a;类型/类别&#xff0c;代表一类个体 类是对象的模板/模子&#xff0c;对象是类的具体的实例 类中…

docker mysql 宿主机挂载配置文件

官方文档摘录&#xff08;勿喷&#xff0c;仅供自己笔记&#xff09; 官方文档如下&#xff1a; The MySQL startup configuration is specified in the file /etc/mysql/my.cnf, and that file in turn includes any files found in the /etc/mysql/conf.d directory that e…

GoLang语言范围(Range)

目录 一、在数组、切片上使用‘range’ 二、在映射上使用range 三、在通道上使用range Go语言中的range关键字用于迭代数组&#xff08;数组、切片、字符串&#xff09;、映射&#xff08;map&#xff09;、通道&#xff08;channel&#xff09;或者在 for 循环中迭代每一个…

案例022:基于微信小程序的行政复议在线预约系统

文末获取源码 开发语言&#xff1a;Java 框架&#xff1a;SSM JDK版本&#xff1a;JDK1.8 数据库&#xff1a;mysql 5.7 开发软件&#xff1a;eclipse/myeclipse/idea Maven包&#xff1a;Maven3.5.4 小程序框架&#xff1a;uniapp 小程序开发软件&#xff1a;HBuilder X 小程序…

Django之中间件

引入 1、Django自带7个中间件&#xff0c;每个中间件都有各自的功能 2、django能够自定义中间件 3、使用场景&#xff1a; 1. 全局身份校验 2. 全局用户权限校验 3. 全局访问频率的校验 ...... 【1】什么是中间件 Django中间件是一个轻量级、可重用的组件&#xff0c;用于处理…

python运行jackhmmer二进制命令的包装器类

jackhmmer 是 HMMER 软件套件中的一个工具&#xff0c;用于进行高敏感度的蛋白质序列比对。HMMER&#xff08;Hidden Markov Model based on profile&#xff09;是一套用于分析蛋白质序列的工具&#xff0c;它使用隐藏马尔可夫模型&#xff08;HMM&#xff09;来建模蛋白质家族…

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;…

543. 二叉树的直径 --力扣 --JAVA

题目 给你一棵二叉树的根节点&#xff0c;返回该树的 直径 。 二叉树的 直径 是指树中任意两个节点之间最长路径的 长度 。这条路径可能经过也可能不经过根节点 root 。 两节点之间路径的 长度 由它们之间边数表示。 解题思路 最长长度可以理解为左子树最长路径加上右子树最长…

MySQL错误之ONLY_FULL_GROUP_BY

报错信息&#xff1a; 翻译&#xff1a; 对该报错的解释 所以&#xff0c;实际上该报错是由于在SQL查询语句中有group by&#xff0c;而这个包含group by的SQL查询写的并不规范导致的&#xff0c;这个ONLY_FULL_GROUP_BY模式开启之后检查就会很严格&#xff0c;如果select列表…

uniapp为什么能支持多端开发?uniapp底层是怎么做的?

文章目录 前言uniapp为什么能支持多端开发&#xff1f;uniapp底层是怎么做条件编译uniapp的语法uniapp如何编译为不同端的代码uniapp的底层是如何做平台特性适配的呢&#xff1f;后言 前言 hello world欢迎来到前端的新世界 &#x1f61c;当前文章系列专栏&#xff1a;uniapp &…

【lua】记录函数名和参数(为了延后执行)

需求背景 一个服务缓存玩家信息到对象里&#xff0c;通过对象的函数定时同步到数据库中&#xff0c;如果玩家掉线 清空对象&#xff0c;但是后续步骤导致对象数据需要变更&#xff0c;对象不存在&#xff0c; 就不方便变更了&#xff0c;怎么处理&#xff1f; 方案思考 1.临…

计算机网络——路由

文章目录 1. 前言&#xff1a;2. 路由基础2.1. 路由的相关概念2.2. 路由的特征2.3. 路由的过程 3 路由协议3.1. 静态路由&#xff1a;3.2. 动态路由&#xff1a;3.2.1. 距离矢量协议3.2.2. OSPF协议&#xff1a;3.2.2.1.OSPF概述OSPF的工作原理路由计算功能特性 3.2.2.2.OSPF报…

【Kafka】Java整合Kafka

1.引入依赖 <dependency><groupId>org.apache.kafka</groupId><artifactId>kafka-clients</artifactId><version>2.3.1</version></dependency> 2.搭建生产者 package com.wen.kafka;import org.apache.kafka.clients.produ…

Vuejs+ElementUI搭建后台管理系统框架

文章目录 1. Vue.js 项目创建1.1 vue-cli 安装1.2 使用 vue-cli 创建项目1.3 文件/目录介绍1.4 启动 Web 服务 2. 集成 Vue Router 前端路由2.1 Vue Router 是什么2.2 集成 Vue Router 方法2.3 使 Vue Router 生效 3. 集成 Vuex 组件3.1 Vuex 是什么3.2 集成 Vuex 方法3.3 使 V…

2023全球数字贸易创新大赛-人工智能元宇宙-4-10

目录 竞赛感悟: 创业的话 好的项目 数字工厂,智慧制造:集群控制的安全问题

dlv 安装与使用

dlv 安装 第一步&#xff1a; # git clone https://github.com/go-delve/delve # cd delve # make install 第二步&#xff1a; # ln -s /root/go/bin/dlv /usr/local/bin/dlv 第三步&#xff1a; # dlv version Delve Debugger Version: 1.21.2 Build: d6f215b27b6d8a4e4…

Excel中出现“#NAME?”怎么办?(文本原因)

excel 单元格出现 #NAME? 错误的原因有二&#xff1a; 函数公式输入不对导致 #NAME? 错误。 在单元格中字符串的前面加了号&#xff0c;如下图中的--GoJG7sEe6RqgTnlUcitA&#xff0c;本身我们想要的是--GoJG7sEe6RqgTnlUcitA&#xff0c;但因为某些不当的操作在前面加了号&…

vue+SpringBoot的图片上传

前端VUE的代码实现 直接粘贴过来element-UI的组件实现 <el-uploadclass"avatar-uploader"action"/uploadAvatar" //这个action的值是服务端的路径&#xff0c;其他不用改:show-file-list"false":on-success"handleAvatarSuccess"…