微信小程序实现星星评价效果

本文实例为大家分享了微信小程序实现星星评价效果的具体代码，供大家参考，具体内容如下

代码实现

页面结构文件

！-page/evaluate page/evaluate page。wxml-view class=' container ' view class=' evaluate _ content '！-外层循环控制有几个评价条目-block wx : for=' { { evaluate _ content } } ' wx : key=' ' wx : for-index=' idx ' view class=' evaluate _ item ' view class=' evaluate _ title ' { item } }/view！-星星评价- view class='evaluate_box '！-内层循环展示每个评价条目的星星-block wx : for=' { { stars } } ' wx : key=' ' image class=' star-image ' style=' left : { { item * 80 } } rpx ' src=' http : { { scores[idx]item？（分数[idx]-项==0.5?half src : selected src): normal src } } ' view class=' item ' style=' left :0 rpx ' data-score=' { { item 0.5 } } ' data-idx=' { { idx } } ' bind tap=' selectLeft '/view class=' item ' style=' left 336020 rpx ' data-score=' { { item 1 } } ' data-idx=' { { idx } } ' bind tap=' selected '提交/button /view/viewjs文件

页面({ data : { evaluate _ content :['评价条目一', '评价条目二', '评价条目三，]，星形：[0，1，2，3，4]，normalSrc: '././images/no-star.png '，selectedSrc: '././images/full-star.png '，halfSrc: '././images/half-star.png '，得分： 0，得分：[0，0，0]，}，//提交事件submit_evaluate:函数(){ console.log('评价得分this.data.scores) }，//点击左边，半颗星选择左：函数{ var score=e .当前目标。数据集。得分如果(这个。数据。得分==0.5 e .当前目标。数据集。得分==0.5){得分=0；}这个。数据。分数[例如当前目标。数据集。idx]=得分，这个。setdata({ :分。数据。分数，score: score }) }，//点击右边，整颗星选择右侧：函数{ var score=e .当前目标。数据集。给这个打分。数据。分数[例如当前目标。数据集。idx]=得分，这个。setdata({ score : this。数据。分数，分数：分数})})wxss

/*评价区域*/.集装箱评估包含.evaluate _ item { font-size : 30 rpx；颜色：灰色；左边距left : 20 rpxmargin-top : 30 rpx；}/*评价标题*/.集装箱评估包含.评估项目evaluate _ title { display : inline-block；}/*评价盒子*/.集装箱评估包含.评估项目评估_框{位置：绝对值；左： 220rpx宽度： 100%;显示器：内联块；}/*星星评价的每个图片*/.集装箱评估包含.评估项目。评估_框。星像{位置：绝对值；宽度： 40 rpx高度： 40rpxsrc: '././图片/无星。png '；}/*星星的左边和右边区域点击左边半个星星，点击右边整个星星*/.集装箱评估包含.评估项目。评估_框。明星形象。项目{位置：绝对值；top: 0rpx宽度： 20 rpx高度： 40rpx}/*按钮*/.集装箱评估包含.submit _ button { height : 60 rpx；font-size : 30 rpx线高： 60 rpxmargin: 20rpx}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。