小程序星星评分（仅展示，10分制，5颗星）

小程序星星评分，含半星（仅展示功能，10分制，5颗星）

新写的页面有这个星星评分展示的功能，但是搜了好久，都不太符合我想要的，于是我就结合别人的，写了自己的，我的是以百度小程序为例子。
记录一下以免自己忘记了！！

先看一下后台给的数据结构吧

commentScore: {
            title:'精选点评',
            commentList: [
                {
                    src:'http://t11.baidu.com/it/u=3975210077,3853873646&fm=179&app=42&f=PNG?w=352&h=352&s=53D6287656EB49A34A520AEC0300B02C',
                    userName:'测scsdds',
                    score:'5.6',
                    commentContent:'sdsdsdsdsddsdsdsddddddddddddddddd撒大声地所多所多多所多所多所多所多所多所多所多所所',
                    time: '2020-07-14'
                },
                {
                    src:'http://t11.baidu.com/it/u=3975210077,3853873646&fm=179&app=42&f=PNG?w=352&h=352&s=53D6287656EB49A34A520AEC0300B02C',
                    userName:'测试号吗',
                    score:'4',
                    commentContent:'喂喂喂翁翁翁翁翁翁翁翁翁翁翁翁翁翁翁翁翁翁翁翁翁翁翁翁翁无',
                    time: '2020-07-14'
                },
                {
                    src:'http://t11.baidu.com/it/u=3975210077,3853873646&fm=179&app=42&f=PNG?w=352&h=352&s=53D6287656EB49A34A520AEC0300B02C',
                    userName:'颠三倒四',
                    score:'9.8',
                    commentContent:'瘦瘦包翁或吧撒所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所',
                    time: '2020-07-14'
                },
                {
                    src:'http://t11.baidu.com/it/u=3975210077,3853873646&fm=179&app=42&f=PNG?w=352&h=352&s=53D6287656EB49A34A520AEC0300B02C',
                    userName:'dvfvfvf',
                    score:'7.4',
                    commentContent:'ffff辅导辅导辅导辅导辅导辅导辅导辅导辅导辅导辅导辅导辅导辅导辅导辅导辅导辅导辅导辅导的辅导辅导辅导辅导辅导辅导辅导费',
                    time: '2020-07-14'
                }
            ],
            more:'查看更多'
        }

js逻辑相关

因为分数是10分，需要先将分数转化成5分制
然后把转化后的分数以小数点拆分
如果然后判断，并以此保存到新数组里面

// 转换星星评分格式，星星数组
    movieStar(score) {
        let that = this
        let scores = score/2
        var str = scores.toString().split('.')
        let newArr = []
        // 0 满星 1 空星 2 半星 
        for (let i = 0;  i< str[0]; i++) { //满
            newArr.push(0)
        }
        if (str[1]) { // 半，判断str[1]是否存在，不存在，就不需要填加半星，存在就添加
            newArr.push(2)
        }
        if (newArr.length !=5 ) { // 空
            let num = 5-newArr.length;
            for (let index = 0; index < num; index++) {
                newArr.push(1)
            }
        }
        that.setData({
            newArr
        })
    },

此时你调用得到的newArr是这样的newArr：[0,0,0,2,1]
转化之后，在你刚获取到数据的地方调用;
先创建一个空数组，然后根据后台返回给你的数据结构（此时代码参考上面的数据结构）
循环数据的长度，依次调用moviescore函数，将分数传进去
然后把newArr数组push到空数组里面

        let starItemArr = [];
        for (let i = 0; i < this.data.commentScore.commentList.length; i++) {
            let scoreNum = this.data.commentScore.commentList[i].score;
            this.movieStar(scoreNum);
            starItemArr.push(this.data.newArr);
        }
        this.setData({
            starItemArr
        })

你转化完之后的starItemArr

然后页面根据你保存的数组来依次循环

swan页面

循环你的数据，根据数据的索引，来循环starItemArr数组，判断数组的每一相项显示不同星星
c-icon-star- xx 这个类名是我自己做的，用的背景图片

<!-- starItemArr[index]  index是索引，是你渲染的索引 -->
<view class="star_rate">
   <view class="star_rate c-gts" s-for={{starItemArr[index]}}>
   		<view class="c-icon-star-full movie_score" s-if="{{item==0}}">  	   </view>
        <view class="c-icon-star-half movie_score" s-elif="{{item==2}}"></view>
        <view class="c-icon-star-empty movie_score" s-else></view>
   </view>
   <view class="c-gts score_text">{{ item.score }}分</view>
</view>

css

.star_rate{
    display: flex;
}
.movie_score{
    width: 3.382vw;
    height: 3.382vw;
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 0.753vw;
}
.score_text{
    font-size: 2.899vw;
    color: #ff6600;
    margin-top: 0.242vw;
    margin-left: 1.558vw;
}