星星评分vue.js+onsen

Posted 2020-12-31 wuxiaojuan

首先行引进onsen和vue.js包.

onsen有自带css画的小星星这边只要引用就可以了

<ons-page>
    <style>
        .ion-star{
            font-size: 24px;
            margin-right: 5px;
            color: #FFB400;
        }
        .ion-ios-star-outline{
            font-size: 24px;
            margin-right: 5px;
            color: black;
        }
        
    </style>    
    
     <div id="starIcon">
            <label>星星数量:{{starNum}}分</label>
            <template v-for="(star,index) in stars">
                     <ons-icon v-bind:icon="star.icon"   v-on:click="rating(index)"></ons-icon>
            </template>
     </div>
        
         <script>
            //星星的图片路径
            var starOffImg = "ion-ios-star-outline";
            var starOnImg = "ion-star";

            var app = new Vue({
                el: "#starIcon",
                data: {
                    stars: [{
                            icon: starOffImg,
                            active: false
                        }, {
                            icon: starOffImg,
                            active: false
                        }, {
                            icon: starOffImg,
                            active: false
                        },
                        {
                            icon: starOffImg,
                            active: false
                        }, {
                            icon: starOffImg,
                            active: false
                        }
                    ],
                    starNum: 0,
                },
                methods: {
                    //评分
                    rating: function(index) {
                        var total = this.stars.length; //星星总数
                        var idx = index + 1; //这代表选的第idx颗星-也代表应该显示的星星数量

                        //进入if说明页面为初始状态
                        if(this.starNum == 0) {
                            this.starNum = idx;
                            for(var i = 0; i < idx; i++) {
                                this.stars[i].icon = starOnImg;
                                this.stars[i].active = true;
                            }
                        } else {
                            //如果再次点击当前选中的星级-仅取消掉当前星级，保留之前的。
                            if(idx == this.starNum) {
                                for(var i = index; i < total; i++) {
                                    this.stars[i].icon = starOffImg;
                                    this.stars[i].active = false;
                                }
                            }
                            //如果小于当前最高星级，则直接保留当前星级
                            if(idx < this.starNum) {
                                for(var i = idx; i < this.starNum; i++) {
                                    this.stars[i].icon = starOffImg;
                                    this.stars[i].active = false;
                                }
                            }
                            //如果大于当前星级，则直接选到该星级
                            if(idx > this.starNum) {
                                for(var i = 0; i < idx; i++) {
                                    this.stars[i].icon= starOnImg;
                                    this.stars[i].active = true;
                                }
                            }

                            var count = 0; //计数器-统计当前有几颗星
                            for(var i = 0; i < total; i++) {
                                if(this.stars[i].active) {
                                    count++;
                                }
                            }
                            this.starNum = count;
                        }
                    }
                }
            })
        </script>
    
</ons-page>

效果图: