当前位置: 开发笔记 > 前端 > 正文

微信小程序五星评价功能的实现

作者：lylmwt | 来源：互联网 | 2022-10-12 15:48

这篇文章主要介绍了微信小程序五星评价功能的实现的相关资料,这里附有实例代码及实现效果图，需要的朋友可以参考下

微信小程序五星评价功能

话不多说，我们来看一下效果图：

要实现的效果：点击到第几颗星，就要显示到第几颗星,

接下来直接查看源码：


  满意度：

　　css如下：

.l-evalbox{
  height: 100rpx;
  padding: 0 3%;
  margin-top: 10rpx;
  background: #FFF;
  line-height: 100rpx;
}
.l-evaltxt{
  width: 120rpx;
  display: block;
  font-size: 26rpx;
  color: #666666;
}
.l-evalist .icon{
  background-position: -77rpx -246rpx;
  width: 40rpx;
  height: 43rpx;
  margin-right: 30rpx;
}
.l-evalist .cur{
  background-position: -128rpx -246rpx;
}
.l-evalist .icon:last-child{
  margin: 0;
}

　　js代码如下：

chooseicon:function(e){
   
  var strnumber=e.target.dataset.id; 
   var _obj={};
    _obj.curHdIndex=strnumber; 
    this.setData({ 
     tabArr: _obj
    });
   
 },

　　这样效果显示如下：

感谢阅读，希望帮助到大家，谢谢大家对本站的支持！

推荐阅读

js
微信小程序实战之菜谱小程序

最近突发奇想，想要自己搞个小程序玩儿玩儿，但是鉴于自己是搞后端服务器出身，对于偏前端的微信小程序开发实在是一知半解，尤其是对于css类样式相关，更是无从下手，于是乎，只能从晚上找了 ... [详细]

蜡笔小新 2023-09-25 21:24:15
js
微信小程序实现类似微博的无限回复功能，内置云开发数据库支持

本文详细介绍了如何利用微信小程序实现类似于微博的无限回复功能，并充分利用了微信云开发的数据库支持。文中不仅提供了关键代码片段，还包含了完整的页面代码，方便开发者按需使用。此外，HTML页面中包含了一些示例图片，开发者可以根据个人喜好进行替换。文章还将展示详细的数据库结构设计，帮助读者更好地理解和实现这一功能。 ... [详细]

蜡笔小新 2024-11-07 09:43:24
js
微信小程序图片上传功能详解：wx.chooseImage与wx.uploadFile的使用方法与注意事项

在微信小程序中，图片上传功能是开发者常用的功能之一。本文详细介绍了 `wx.chooseImage` 和 `wx.uploadFile` 的使用方法及注意事项。通过 `wx.chooseImage`，用户可以选择本地图片或拍摄新照片，而 `wx.uploadFile` 则用于将选中的图片上传到服务器。文章还提供了代码示例，帮助开发者更好地理解和应用这两个 API。此外，文中还讨论了常见的错误处理和性能优化技巧，确保图片上传过程的稳定性和高效性。 ... [详细]

蜡笔小新 2024-11-04 12:51:52
html
wxParse 0.3：微信小程序中的高级 HTML 和 Markdown 富文本解析器，全面支持多级嵌套与 Emoji 表情

wxParse 0.3 是一款专为微信小程序设计的高级富文本解析器，支持 HTML 和 Markdown 转换为 WXML 可视化格式。该组件不仅能够处理复杂的多级嵌套结构，还全面支持 Emoji 表情，极大地提升了内容展示的多样性和用户体验。 ... [详细]

蜡笔小新 2024-11-01 19:12:59
node.js
黄文俊：Serverless小程序后端技术分享

欢迎大家前往腾讯云+社区，获取更多腾讯海量技术实践干货哦~黄文俊，现任腾讯云SCF无服务器云函数高级产品经理，多年企业级系统开发和架构工作经验，对企业级存储、容器平台、微服务架构、无服务器计 ... [详细]

蜡笔小新 2023-10-12 19:41:44
overflow
小程序组件超过屏幕问题及禁止页面下拉

1.有事会出现小程序的页面超出屏幕，导致横向和纵向溢出，这时候在wxss文件中加入overflow:hidden来隐藏溢出屏幕的部分。.container{background:# ... [详细]

蜡笔小新 2023-10-12 18:00:02
js
微信小程序新手教程wx.request(object) API

微信小程序新手教程wx.request(object)API，本篇默认已经成功安装微信小程序工具，来和小编一起看看吧wx.request(object)API这里通过干活集中营的A ... [详细]

蜡笔小新 2023-10-11 19:40:57
js
微信小程序开发如何实现地图功能

这篇文章主要讲解了“微信小程序开发如何实现地图功能”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研 ... [详细]

蜡笔小新 2023-10-11 18:22:39
js
我的java微信小程序后台

以前都是用php开发微信公众号，很少有人用java来做,我用java来做了一个微信小程序的后台，前端是一个微信商城,没有开发完，但是已经封装了取得openid,wechat-master目录 ... [详细]

蜡笔小新 2023-09-17 13:39:51
js
微信小程序之仿android fragment之可滑动的底部导航栏实例 —— 微信小程序实战系列（4）

底部3-5个选项的底部导航栏，目前在移动端上是主流布局之一因此腾讯官方特地做了，可以通过设置，就可以做出了一个底部的导航栏相关教程：http:blog.csdn.netmichael_ou ... [详细]

蜡笔小新 2023-09-17 10:00:28
js
微信小程序学习笔记-3-问题

一些在开发微信小程序中常见的问题页面渲染　　微信小程序中规定所有页面上渲染出来的数据，包括文字和图片皆包含在在每个页面文件夹中的js文件中的page这个内置函数的参数data中， ... [详细]

蜡笔小新 2023-09-16 17:25:35
js
微信小程序开发——下拉刷新的实现

微信小程序下拉触发onPullDownRefresh函数调用，但是问题在这里面的实现并没有生效。原因：微信小程序默认不支持下拉也就是说想要支持下拉刷新的功能，还必须得要在app.jso ... [详细]

蜡笔小新 2023-09-16 16:51:01
js
怎么在微信小程序中监听全局变量

今天就跟大家聊聊有关怎么在微信小程序中监听全局变量，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇 ... [详细]

蜡笔小新 2023-09-16 08:23:38
js
微信小程序如何实现列表的横向滑动

小编这次要给大家分享的是微信小程序如何实现列表的横向滑动，文章内容丰富，感兴趣的小伙伴可以来了解一下，希望大家阅读完这篇文章之后能够有所 ... [详细]

蜡笔小新 2023-09-15 10:30:19
js
微信小程序自定义组件与页面的相互传参

这篇文章主要为大家介绍了微信小程序自定义组件与页面的相互传参过程详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家 ... [详细]

蜡笔小新 2023-09-13 16:25:36

lylmwt

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章