热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

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

这篇文章主要介绍了微信小程序如何实现五星评价功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

这篇文章主要介绍了微信小程序如何实现五星评价功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

效果

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

接下来直接查看源码:


 满意度:
 
  
  
  
  
  
 

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
  });  
 },

这样效果显示如下:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。


推荐阅读
  • 微信小程序实战之菜谱小程序
    最近突发奇想,想要自己搞个小程序玩儿玩儿,但是鉴于自己是搞后端服务器出身,对于偏前端的微信小程序开发实在是一知半解,尤其是对于css类样式相关,更是无从下手,于是乎,只能从晚上找了 ... [详细]
  • 程序员如何优雅应对35岁职业转型?这里有深度解析
    本文探讨了程序员在职业生涯中如何通过不断学习和技能提升,优雅地应对35岁左右的职业转型挑战。我们将深入分析当前热门技术趋势,并提供实用的学习路径。 ... [详细]
  • 欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~黄文俊,现任腾讯云SCF无服务器云函数高级产品经理,多年企业级系统开发和架构工作经验,对企业级存储、容器平台、微服务架构、无服务器计 ... [详细]
  • 微信小程序API音频-暂停播放是千自学中一篇关于微信小程序的文章简介:wx.pauseVoice(Objectobject)从基础库 1.6.0 开始,本接口停止维护,请使用 wx.createInnerAudioContext 代替暂停正在播放的语 ... [详细]
  • 微信小程序中如何实现轮播图
    这篇文章主要介绍了微信小程序中如何实现轮播图,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带 ... [详细]
  • 微信小程序新手教程wx.request(object) API
    微信小程序新手教程wx.request(object)API,本篇默认已经成功安装微信小程序工具,来和小编一起看看吧wx.request(object)API这里通过干活集中营的A ... [详细]
  • 本文主要介绍关于微信小程序,小程序,今日头条,新闻,前端的知识点,对【仿今日头条实时新闻微信小程序项目源码】和【自己怎么弄微信小程序】有兴趣的朋友可以看下由【叶绿体不忘呼吸】投稿的技术文章,希望该技术 ... [详细]
  • 小程序中如何实现弹出菜单功能
    这篇文章给大家分享的是有关小程序中如何实现弹出菜单功能的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。需求点击 ... [详细]
  • 以前都是用php开发微信公众号,很少有人用java来做,我用java来做了一个微信小程序的后台,前端是一个微信商城,没有开发完,但是已经封装了取得openid,wechat-master目录 ... [详细]
  • 微信小程序之仿android fragment之可滑动的底部导航栏实例 —— 微信小程序实战系列(4)
    底部3-5个选项的底部导航栏,目前在移动端上是主流布局之一因此腾讯官方特地做了,可以通过设置,就可以做出了一个底部的导航栏相关教程:http:blog.csdn.netmichael_ou ... [详细]
  • 微信小程序学习笔记-3-问题
    一些在开发微信小程序中常见的问题页面渲染  微信小程序中规定所有页面上渲染出来的数据,包括文字和图片皆包含在在每个页面文件夹中的js文件中的page这个内置函数的参数data中, ... [详细]
  • 微信小程序下拉触发onPullDownRefresh函数调用,但是问题在这里面的实现并没有生效。原因:微信小程序默认不支持下拉也就是说想要支持下拉刷新的功能,还必须得要在app.jso ... [详细]
  • 今天就跟大家聊聊有关怎么在微信小程序中监听全局变量,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇 ... [详细]
  • 微信小程序如何实现列表的横向滑动
    小编这次要给大家分享的是微信小程序如何实现列表的横向滑动,文章内容丰富,感兴趣的小伙伴可以来了解一下,希望大家阅读完这篇文章之后能够有所 ... [详细]
  • 微信小程序自定义组件与页面的相互传参
    这篇文章主要为大家介绍了微信小程序自定义组件与页面的相互传参过程详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家 ... [详细]
author-avatar
mobiledu2502884587
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有