微信互动小程序_微信小程序 五星评价功用的完成

发布时间:2021-01-12 13:14 作者:jianzhan

摘要: 手机微信微信小程序 五星点评作用的完成 文章投稿:lqh 本文关键详细介绍了手机微信微信小程序 五星点评作用的完成的有关材料,这儿附带案例编码及完成实际效果图,必须的朋

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

话不多说,我们来看一下效果图:

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

  接下来直接查看源码:

 view 
 text 满意度: /text 
 view bindtap="chooseicon" 
 icon class="{{tabArr.curHdIndex '0' 'cur icon' : 'icon'}}" data-id="1" /icon 
 icon class="{{tabArr.curHdIndex '1' 'cur icon' : 'icon'}}" data-id="2" /icon 
 icon class="{{tabArr.curHdIndex '2' 'cur icon' : 'icon'}}" data-id="3" /icon 
 icon class="{{tabArr.curHdIndex '3' 'cur icon' : 'icon'}}" data-id="4" /icon 
 icon class="{{tabArr.curHdIndex '4' 'cur icon' : 'icon'}}" data-id="5" /icon 
 /view 
 /view 

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

这样效果显示如下:

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


  • 《旅游田鸡》成第一款淘

    原题目:《旅游田鸡》成第一款淘宝网内嵌H5手游游戏 阿里巴巴想靠拷贝手机微信游戏方式开启社交媒体互动交流之途? 做为2018年初第一款状况级手机游戏,《旅游田鸡》的关注度起

  • 一篇直播间服务平台源代

    模拟题目:一篇直播间间综合服务平台源码搭建案例实例教程告之你如何轻轻地松松搭建直播间间间 目前直播间间生产制造制造行业的综合性综合服务平台不计其数,做为直播间间生产

  • 为何一定要做网站优化,

    为什么一定要建立网站提升,这好多个缘故一定要了解编写:admin 時间:2019/2/18 互连网时期也是自媒体平台时期,大家能看到许多的人都会建立网站提升提升,应对时下的这类状况,为

  • 运用之星:H5制作实例教程

    模拟题目:应用之星:H5制作案例实例教程-手动式式H5网页页面网页页面制作综合服务平台 H5是HTML5的统称。HTML5是HTML全新升级的修订版本号号,是一种HTML文档标志语言。H5有几个特点:

  • 20184月18日河南省省差旅员

    (三)出题特性 1.综合性剖析题以农村基层工作中中有异议的工作中方法为出题点,这与上年“农村基层调查APP精准定位”一题,出题偏重于点有重叠的地方,即讨论在“互连网+”和“