HarmonyOS Developer之五星好评

rating

rating为评分条组件，用来实现用户使用感受的衡量标准条(如：五星好评)

在pages/index目录下的hml文件中创建一个rating组件:
HTML

<!-- xxx.hml -->
<div class="container"><rating></rating>
</div>

CSS

/* xxx.css */
.container {width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;background-color: #F1F3F5;
}
rating {width: 80%;height: 150px;
}

实现非5星好评

rating组件通过设置numstars和rating属性设置评分条的星级总数和当前评星数：

HTML:

<!-- xxx.hml -->
<div class="container"><rating numstars="6" rating="5"></rating>
</div>

/* xxx.css */
.container {width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;background-color: #F1F3F5;
}
rating {width: 80%;height: 150px;
}

自定义评分样式

rating组件通过star-background、star-foreground和star-secondary属性设置单个星级未选择、选中和选中的次级背景图片：

HTML

<!-- xxx.hml -->
<div class="container"><div style="width: 500px;height: 500px;align-items: center;justify-content: center;flex-direction: column;;"><rating numstars="5" rating="1" class="myrating" style="width: {{ratewidth}}; height:{{rateheight}}; star-background: {{backstar}}; star-secondary: {{secstar}};star-foreground: {{forestar}};rtl-flip: true;"></rating></div>
</div>

CSS

/* xxx.css */
.container {width: 100%;height: 100%;flex-direction: column;align-items: center;justify-content: center;background-color: #F1F3F5;
}

JS

// index.js
export default {data: {backstar: 'common/love.png',secstar: 'common/love.png',forestar: 'common/love1.png',ratewidth: '400px',rateheight: '150px'},onInit(){}
}

说明- star-background、star-secondary、star-foreground属性的星级图源必须全部设置，否则默认的星级颜色为灰色，提示图源设置错误。- star-background、star-secondary、star-foreground属性只支持本地路径图片，图片格式为png和jpg。