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

本文实例讲述了微信小程序实现的五星评价功能。分享给大家供大家参考，具体如下：

实现五星评价功能，效果图如下：

。页面结构文件：

view class='star-title'1，品质效果/view view class=' star-pos ' image class=' stars ' bind tap=' change color ' data-index=' 0 ' data-no=' { { item } } ' wx : for=' { { stardata } } ' src=' http : { { flag[0]=item '？/./images/icon/star1.png': '././图像/图标/星形0。png ' } '/view style='左边距： 30 rpx'{ { startext[0]} }/view/view class=' star-title ' 2，服务质量/view view class=' star-pos ' image class=' stars ' bind tap=' change color ' data-index=' 1 ' data-no=' { { item } } ' wx : for=' { { stardata } } ' src=' http : { { flag[1]=item '？/./images/icon/star1.png': '././图像/图标/星形0。png ' } '/view style='左边距： 30 rpx'{ { startext[1]} }/view/view class=' star-title ' 3，综合管理/view view class=' star-pos ' image class=' stars ' bind tap=' change color ' data-index=' 2 ' data-no=' { { item } } ' wx : for=' { { stardata } } ' src=' http : { { flag[2]=item '？/./images/icon/star1.png': '././图像/图标/星形0。png ' } '/view style='左边距： 30 rpx'{{startext[2]}}/view/view.js文件：

第：页({ data : { flag :[0，0，0]，startext: [''，' '，' ']，stardata: [1，2，3，4，5]，}，//五星评价事件changeColor:函数{ var index=e . CurrentTarget。数据集。指数；var num=e . CurrentTarget。数据集。没有；var a=' flag[' index ']'；var b=' startext[' index ']'；变量=这个；if(num==1){ that。setdata({[a]: 1，[b]: '非常不满意' });} else if(num==2){ that。setdata({[a]: 2，[b]: '不满意' });} else if(num==3){ that。setdata({[a]: 3，[b]: '一般' });} else if(num==4){ that。setdata({[a]: 4，[b]: '满意' });} else if(num==5){ that。setdata({[a]: 5，[b]: '非常满意' });} },}).页面样式表文件：star-pos { margin : 10 rpx；display : flex flex-方向：行；}.星形{ width : 40 rpx h8 : 40 rpx左边距left: 30rpx}希望本文所述对大家微信小程序开发有所帮助。