rating

概述

用于展示星级评分。

使用限制

子组件

不支持

属性

除了支持 通用属性 以外，还支持如下属性。

样式

支持active伪类。除了支持 通用样式 以外，还支持如下样式。

事件

不支持 click 和 longpress 事件，不支持 swipe 事件。除了支持 通用事件 以外，还支持如下事件。

示例代码

<template>
  <div class="container">
    <div class="page-title-wrap">
      <text class="page-title">{{componentName}}</text>
    </div>
    <rating class="ratingStyle" numstars="4" rating="2" @change="showChangePrompt"></rating>
  </div>
</template>

<style>
    .container {
      flex: 1;
      flex-direction: column;
    }
    .page-title-wrap {
      padding-top: 50px;
      padding-bottom: 80px;
      justify-content: center;
    }
    .page-title {
      padding-top: 30px;
      padding-bottom: 30px;
      padding-left: 40px;
      padding-right: 40px;
      border-color: #bbbbbb;
      color: #bbbbbb;
      border-bottom-width: 2px;
    }
    .ratingStyle {
      star-background: url(/Common/img/ic_stars_gray_mid.png);
      star-foreground: url(/Common/img/ic_stars_blue_mid.png);
      star-secondary: url(/Common/img/ic_stars_blue_half_mid.png);
      height: 150px;
    }
</style>

<script>
    import prompt from '@system.prompt'
    export default {
        data: {
            componentName: 'rating'
        },
        onInit() {
            this.$page.setTitleBar({ text: 'rating' })
        },
        showChangePrompt(ret) {
            prompt.showToast({
                message: JSON.stringify(ret.rating)
            })
        }
    }
</script>

效果图如下：

版本更新说明