微信小程序实现【点击 滑动 评分 评星(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.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}

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

什么是LLC电路?

LLC电路是由2个电感和1个电容构成的谐振电路&#xff0c;故称之为LLC&#xff1b; LLC电路主要由三个元件组成&#xff1a;两个电感分别为变压器一次侧漏感(Lr)和励磁电感(Lm)&#xff0c;电容为变压器一次侧谐振电容(Cr)。这些元件构成了一个谐振回路&#xff0c;其中输入电感…

程序员进阶高管指南,看懂工资最少加5k

从象牙塔毕业跨入社会大染缸&#xff0c;很多人都跟我谈过他们的职业困惑&#xff0c;其中有一些刚刚毕业&#xff0c;有些人已经工作超过10年。基本上是围绕着怎样持续提升&#xff0c;怎样晋升为高级管理者。那么这篇文章&#xff0c;我就来谈一谈程序员到高管的跃升之路。 …

程序环境和预处理(详解版)

我们已经学到这里&#xff0c;这就是关于C语言的最后一个集中的知识点了&#xff0c;虽然它比较抽象&#xff0c;但是了解这部分知识&#xff0c;可以让我们对C代码有更深层次的理解&#xff0c;知道代码在每一个阶段发生什么样的变化。让我们开始学习吧! 目录 1.程序的翻译环…

5个免费在线工具推荐

NSDT 三维场景建模工具GLTF/GLB在线编辑器Three.js AI自动纹理化开发包YOLO 虚幻合成数据生成器3D模型在线转换 1、NSDT 三维场景建模 访问地址&#xff1a;NSDT 编辑器 2、GLTF/GLB在线编辑器 访问地址&#xff1a;GLTF 编辑器 3、Three.js AI自动纹理化开发包 图一为原始模…

C++类与对象(4)—日期类的实现

目录 一、类的创建和方法声明 二 、输出&运算符重载 三、检查合法性 1、获取对应年月的天数 2、初始化 四、实现加等和加操作 1、先写再写 2、先写再写 3、两种方式对比 五、实现自增和--自减 1、自增 2、自减 六、 实现减等和减操作 1、减等天数 2、加负数…

【数据结构/C++】线性表_双链表基本操作

#include <iostream> using namespace std; typedef int ElemType; // 3. 双链表 typedef struct DNode {ElemType data;struct DNode *prior, *next; } DNode, *DLinkList; // 初始化带头结点 bool InitDNodeList(DLinkList &L) {L (DNode *)malloc(sizeof(DNode))…

motionlayout的简单使用

MotionLayout 什么是motionLayout&#xff1f; MotionLayout 是 Android 中的一个强大工具&#xff0c;用于创建复杂的布局动画和过渡效果。它是 ConstraintLayout 的一个子类&#xff0c;继承了 ConstraintLayout 的布局功能&#xff0c;同时添加了动画和过渡的支持。Motion…

深度解析 Docker Registry:构建安全高效的私有镜像仓库

文章目录 什么是Docker Registry&#xff1f;Docker Hub vs. 私有RegistryDocker Hub&#xff1a;私有Registry&#xff1a; 如何构建私有Docker Registry&#xff1f;步骤一&#xff1a;安装Docker Registry步骤二&#xff1a;配置TLS&#xff08;可选&#xff09;步骤三&…

Adobe xd有免费版可以使用吗?

Adobexd现在收费了吗&#xff1f;Adobexd是收费的。Adobexd在中国提供个人版和团队版两项收费政策。个人版每月订阅60元&#xff0c;每年订阅688元&#xff1b;团队版每月订阅112元/用户&#xff0c;每年订阅1288元/用户。 虽然AdobeXD的免费计划已经下线&#xff0c;但Adobe仍…

穿山甲SDK 集成·android接入广告·app流量变现

接入穿山甲SDK的app 数独训练APP 广告接入示例: Android 个人开发者如何接入广告SDK&#xff0c;实现app流量变现 接入穿山甲SDK app示例&#xff1a; android 数独小游戏 经典数独休闲益智 随着移动互联网的快速发展&#xff0c;广告成为了许多应用开发者获取收益的主要方…

【2023.11.23】JDBC基本连接语法学习➹

1.导入jar包依赖&#xff1a;mysql-connector-java-8.0.27.jar 2.连接数据库&#xff01; 3.无法解析类->导入java.sql.*&#xff0c;&#xff08;将项目方言改为Mysql&#xff09; JDBC&#xff0c;启动&#xff01;&#xff01; public class Main {public static voi…

原生js实现form表单保存按钮触发后表单只读以及编辑按钮灰化,编辑按钮触发后表单是编辑状态以及保存按钮灰化

一、问题场景&#xff1f; 原生js实现form表单保存按钮触发后表单只读以及编辑按钮灰化&#xff0c;编辑按钮触发后表单是编辑状态以及保存按钮灰化 场景1&#xff1a;初始化进去的时候&#xff0c;编辑灰化&#xff0c;保存高亮&#xff0c;表单为编辑状态 场景2&#xff1a…

增量有余、后劲不足,星途汽车10月份销量环比下降3.9%

撰稿|行星 来源|贝多财经 近日&#xff0c;奇瑞集团发布了10月销量月报。报告显示&#xff0c;奇瑞集团于2023年10月销售汽车20.03万辆&#xff0c;同比增长50.8%&#xff0c;单月销量首次突破20万辆&#xff1b;2023年前10个月的累计销量为145.36辆&#xff0c;同比增长41.6…

利用STM32CubeMX解读时钟树

1&#xff0c;低速时钟 LSE是外部晶振作时钟源&#xff0c;主要提供给实时时钟模块&#xff0c;所以一般采用32.768KHz。LSI是由内部RC振荡器产生&#xff0c;也主要提供给实时时钟模块&#xff0c;频率大约为40KHz。(LSE和LSI)只是提供给芯片中的RTC(实时时钟)及IWDG(独立看门…

揭开未来:塑造数字营销的尖端技术

介绍 对于企业来说&#xff0c;要想在瞬息万变的数字营销世界中取得成功&#xff0c;领先一步至关重要。技术正在以惊人的速度发展&#xff0c;开辟了新的机会&#xff0c;正在改变营销人员与消费者的互动方式。这篇文章的目的是重点介绍重新定义数字营销领域的十大创新技术。…

如何进行MySQL的主从复制(MySQL5.7)

背景&#xff1a;在一些Web服务器开发中&#xff0c;系统用户在进行数据访问时&#xff0c;基本都是直接操作数据库MySQL进行访问&#xff0c;而这种情况下&#xff0c;若只有一台MySQL服务器&#xff0c;可能会存在如下问题 数据的读和写的所有压力都会由一台数据库独…

Vim 一下日志文件,Java 进程没了?

一次端口告警&#xff0c;发现 java 进程被异常杀掉&#xff0c;而根因竟然是因为在问题机器上 vim 查看了 nginx 日志。下面我将从时间维度详细回顾这次排查&#xff0c;希望读者在遇到相似问题时有些许启发。 时间线 15:19 收到端口异常 odin 告警。 状态:P1故障 名称:应用端…

c语言-数组长度的计算(结构体数组,字符串数组)

数组的长度我们可以直接根据函数声明得到数组的长度&#xff0c;或者可以通过计算的方法如下&#xff1a; 数组长度sizeof(数组名)/sizeof(数组类型) 测试代码如下&#xff1a;测试int整形数组&#xff0c;char字符数组&#xff0c;字符串数组&#xff0c;结构体数组。 #includ…

案例012:Java+SSM+uniapp基于微信小程序的科创微应用平台设计与实现

文末获取源码 开发语言&#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 小程序…

VR直播如何打破视角壁垒,提升观看体验?

随着数字技术的不断发展&#xff0c;直播行业也发生了新的变革&#xff0c;VR直播也成为了直播行业中新的趋势&#xff0c;那么VR直播是如何打破视角壁垒&#xff0c;提升观看体验的呢&#xff1f; 杭州亚运会那几天&#xff0c;多项比赛热火朝天&#xff0c;无论你是参赛队伍的…