先来个效果图镇楼:

实现原理:

1.循环需要评分的列表,判断它的分数 与 当前星星索引的大小;

2.点击,获取星星对应的分数,让星星高亮。

代码:

star.wxml:

<view class="weui-cells {{!margin ? 'weui-cells__mt0' : ''}}">
<view class='weui-cell' wx:for="{{subjectStarList}}" wx:key="id" wx:for-item="subjectStar" wx:for-index="subIdx">
<view class='weui-cell__bd'>
{{subjectStar.name}}
</view>
<view class='weui-cell__ft'>
<view class='score-list'>
<ss-icon wx:for="{{stars}}" wx:for-item="stars" name="star-full" custom-class=" score-item {{subjectStar.score > index ? 'active' : ''}} " data-sub-idx="{{subIdx}}" data-score="{{stars}}" bind:click="grade"></ss-icon>
</view>
</view>
</view>
</view>

上面的ss-icon 是我自定义的一个组件,点击查看

主要代码说明:

{{subjectStar.score > index ? 'active' : ''}} —— 当前的分数如果大于当前星星的索引,就给它添加 active 样式,就是让它变成高亮黄色;
data-sub-idx="{{subIdx}}" —— 获取你当前点击的是第几项
data-score="{{stars}}" —— 当前你的星星对应的是几分

star.js:

// components/star/index.js
Component({
options: {
addGlobalClass: true,
}, /**
* 组件的初始数据
*/
data: {
subjectStarList: [{
id: 1,
name: '学校表现',
score: 1
}, {
id: 2,
name: '作业完成情况',
score: 4
}, {
id: 3,
name: '爱护同学',
score: 0
}],
stars: [1, 2, 3, 4, 5]
},/**
* 组件的方法列表
*/
methods: {
grade: function(e) {
let that = this;
let score = e.currentTarget.dataset.score;
let subIdx = e.currentTarget.dataset.subIdx;
let subScore = `subjectStarList[${subIdx}].score`;
//只有一颗星的时候,再次点击,变为0颗
if (that.data.subjectStarList[subIdx].score == 1 && score == 1) {
score = 0;
}
that.setData({
[subScore]: score,
});
},
}
})

注意!!我是把这个评分功能做成的一个组件形式,所以js 文件里面主要是组件写法。这里主要介绍一下它的原理~

微信小程序——星星评分的更多相关文章

  1. 微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示

    一.前言 项目中遇到的评分相关的需求其实还挺多.之前也写过网页中关于评分功能实现的文档.这次,是基于微信小程序开发而提炼出一个简单方便使用的方法,网页开发中同样可用.这次使用的还是字体,主要是字体这个 ...

  2. 微信小程序之评分页面

    首先给大家看看做好的效果图: 一.接下来我们说一下评分这个功能: 实际上就是一个简单的js,首先我们遍历出小星星,此时默认给的五星好评,在给他们一个点击事件,当点击时,我们获取到当前点击的是第几颗:代 ...

  3. 微信小程序 - 五星评分(含半分)

    转载自:http://blog.csdn.net/column/details/13721.html     演示:     下载:小程序-星级评论.zip  

  4. 微信小程序星星评价

    https://www.jianshu.com/p/4d7359dfa040

  5. 微信小程序滚动动画,点击事件及评分星星制作!

    前言 小程序上线刷爆了朋友圈,但是最近渐渐消沉了,很少有动静!最近公司项目需要,体验了一下微信小程序,制作了几个功能,布局感觉很简单,但是交互和动画等写起来确实很费劲,主要是因为他不能操作DOM,只能 ...

  6. 边做边学入门微信小程序之仿豆瓣评分

    微信小程序由于适用性强.逻辑简要.开发迅速的特性,叠加具有海量活跃用户的腾讯公司背景,逐渐成为了轻量级单一功能应用场景的较佳承载方式,诸如电影购票.外卖点餐.移动商城.生活服务等场景服务提供商迅速切入 ...

  7. 微信小程序开发 [06] 一些补充的知识点

    0.写在前面的话 前几章的内容串联起来,基本上已经能写比较基础的小程序页面逻辑了,当然,wxml和wxss的我并没有写,因为前端我也并不擅长.这个章节,准备随便叨叨,然后补充一些之前没有提到的基础知识 ...

  8. 微信小程序学习指南

    作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...

  9. python flask框架学习(三)——豆瓣微信小程序案例(一)templates的使用,宏的使用,前端后台传数据,前端写python语句

    目录 一.templates的使用 (1)在templates里创建一个index.html (2)再在app.py里写 (3)展示效果 二.构建第一个电影评分 (1)准备好素材放进static里的i ...

随机推荐

  1. Another app is currently holding the yum lock; waiting for it to exit.. yum被锁定无法使用

    yum被锁定无法使用 Another app is currently holding the yum lock; waiting for it to exit.. 解决方法: rm -rf /var ...

  2. Python 的黏包问题

    Client 端内的代码: #Author:BigBao #Date:2018/7/4 import socket import struct client=socket.socket(socket. ...

  3. c 常见错误

    ."c" not an argument in function sum 该标识符不是函数的参数2.array bounds missing ] in function main ...

  4. oracle trim函数用法详解

    在oracle数据库中,trim一般都是用在删除字符串两边的空格.实际上,trim也可以用来删除字符串两边的指定字符.并且trim指定删除的字符串只能是单个字符Oracle TRIM函数是很常见的函数 ...

  5. Nginx做转发

    二台服务器,服务器A做域名转外,所有外网的域名都到这台服务器A的80端口上,服务器B内网地址192.168.1.227, 上面IIS搭建了N多网站,以端口来区分,用以前的方式 配置转发 结果发现首页能 ...

  6. [svc]centos6上部署openvpn+gg二步认证

    最近又发现个新的vpn: wireguard 为了满足员工在家办公的需求.需要 openvpn+gg方案 在centos6上部署openvpn 参考 1.安装前准备 wget -O /etc/yum. ...

  7. 一分钟上手, 让 Golang 操作数据库成为一种享受

    gorose, 最风骚的 go orm, 拥有链式操作, 开箱即用, 一分钟上手等八大风骚, 让 golang 操作数据库成为一种享受, 妈妈再也看不到我处理数据的痛苦了, 下面就来为大家一一讲解 g ...

  8. rdesktop 指定服务器的分频率

    rdesktop -uAdministrator -g 1265x728 10.100.0.225 &

  9. Oracle客户端使用sqlldr导数据中文乱码问题解决方法

    String strctl = "OPTIONS (skip=0)" + // 0是从第一行开始 1是 从第二行 CHARACTERSET AL32UTF8 是为了解决导入中文为乱 ...

  10. angular学习笔记(三十)-指令(9)-一个简单的指令示例

    学了前面这么多关于指令的知识,现在就用指令来写一个小组件:expander 这个组件的功能就是点击开展菜单,再点击收起菜单: ↑↓点击展开收起 下面来看它的代码: html: <!DOCTYPE ...