zoukankan      html  css  js  c++  java
  • 星星评分功能(带小数点的那种,5颗星,10分制)

    描述:

           做一个星星评分功能,5颗星,10分制,精确到小数点的那种。

    可以封装成组件,哪里需要就引入到需要的界面即可。

    //score.vue
    //html代码
    <view class="scroe-content">
    <template v-if="score>0">
    <text>显示从父组件传递过来的分数{{(score/10).toFixed(2)}}</text>
    <template v-for="(item,index) in fullStar" >
    <view class="star-one" :key="index">
    <view class="star-two">
    <view class="star" :style="{'width':item.width}"></view>
    </view>
    </view>
    </template>
    <tempalte v-if="greyStar">
    <image src="这里放灰色星星" class="star-img" v-for="item in greyStar" :key="item"></image>
    </template>
    </template>

    <template v-else>
    //这里放灰色星星,循环 greyStar 变量即可
    <image src="这里放灰色星星" class="star-img" v-for="item in greyStar" :key="item"></image>
    </template>
    </view>

    //js
    export default {
    props:{
    score:{}
    },
    data(){
    return{
    greyStar:0,
    fullStar:[],
    }
    },
    mounted(){
    this.isFullStar();
    },
    methods:{
    isFullStar(){
    let score = (this.score / 10) / 2 ;
    let score_int = parseInt(score);
    let fullStar = [];
    for(let i=0;i<score_int;i++){
    fullStar.push({
    '100%'
    })
    }
    let score_float = score.toFixed(2);
    let float = '0.' + score_float.split('.')[1];

    if(float == 0 && this.score%2===0){

    }else{
    let float_width = Number(float) * 100;
    fullStar.push({
    float_width + '%'
    })
    }
    this.greyStar = 5 - fullStar.length;
    this.fullStar = fullStar
    }
    }
    }

    //css
    .score-content{
    display:flex;
    justify-content:center;
    align-items:center
    }

      .star-img{

        25rpx;

        height:25rpx;

      }

      .star-one,.star-two{

        25rpx;

        height:25rpx

      }

      .star-one{

        position:relative;

        background:url('放灰色星星') no-repeat;

        background-size:cover;

        margin-right:7rpx;

      }

      .star{

        position:absolute;

        top:0;

        left:0;

        70%;

        height:25rpx;

        background:url('放亮星星') no-repeat;

        background-size:cover;

      }

    //使用方式,假设index界面需要使用

    //js

    import score from '@/components/score.vue;

    components:{

      score

    }

    //html--假设是在循环里面

    <score :score="item.score"></score>

    参考链接:  https://www.jb51.net/article/113960.htm

  • 相关阅读:
    Vue插件配置和 后台交互
    Vue项目环境搭建
    数据结构之链表
    数据结构之线性表顺序结构
    leetcode-- Longest Common Prefix
    数据结构之拓扑排序
    数据结构之shell排序
    数据结构之插入排序
    leetcode
    leetcode
  • 原文地址:https://www.cnblogs.com/sunnyeve/p/14138204.html
Copyright © 2011-2022 走看看