介绍
这篇文章将为大家详细讲解有关微信小程序实现五星评价功能的方法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
效果
要实现的效果:点击到第几颗星,就要显示到第几颗星,& lt; br过滤数据=癴iltered"在/////////////////
接下来直接查看源码:
& lt; view 类=發-evalbox row"比; ,& lt; text 类=發-evaltxt"在满意度:& lt;/text> ,& lt; view 类=發-evalist flex-1", bindtap=癱hooseicon"比; & lt;才能icon 类=皗{tabArr.curHdIndex 祝辞& # 39;0 & # 39;?,& # 39;cur 图标# 39;,:,& # 39;图标# 39;}}“,数据id=?“祝辞& lt;/icon> & lt;才能icon 类=皗{tabArr.curHdIndex 祝辞& # 39;1 & # 39;?,& # 39;cur 图标# 39;,:,& # 39;图标# 39;}}“,数据id=?“祝辞& lt;/icon> & lt;才能icon 类=皗{tabArr.curHdIndex 祝辞& # 39;2 & # 39;?,& # 39;cur 图标# 39;,:,& # 39;图标# 39;}}“,数据id=?“祝辞& lt;/icon> & lt;才能icon 类=皗{tabArr.curHdIndex 祝辞& # 39;3 & # 39;?,& # 39;cur 图标# 39;,:,& # 39;图标# 39;}}“,数据id=?“祝辞& lt;/icon> & lt;才能icon 类=皗{tabArr.curHdIndex 祝辞& # 39;4 & # 39;?,& # 39;cur 图标# 39;,:,& # 39;图标# 39;}}“,数据id=?“祝辞& lt;/icon> ,& lt;/view> & lt;/view< br 过滤数据=癴iltered"祝辞& lt; br 过滤数据=癴iltered"在
css如下:
.l-evalbox { ,身高:100 rpx; ,填充:0,3%; ,margin-top: 10 rpx; ,背景:# FFF; ,行高:100 rpx; } .l-evaltxt { ,宽度:120 rpx; ,显示:块; ,字体大小:26 rpx; ,颜色:# 666666; } .l-evalist .icon { -246年,背景位置:-77 rpx rpx; ,宽度:40 rpx; ,高度:43 rpx; ,margin-right: 30 rpx; } .l-evalist .cur { -246年,背景位置:-128 rpx rpx; } .l-evalist .icon:胎{ ,保证金:0; }& lt; br 过滤数据=癴iltered"在
js代码如下:
chooseicon:函数(e) { ,, ,var strnumber=e.target.dataset.id; var 才能_obj={}; _obj.curHdIndex才能=strnumber; this.setData({才能 ,,tabArr: _obj })才能,,, ,},
这样效果显示如下:
关于“微信小程序实现五星评价功能的方法”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看的到。