用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实战教程 查看内容

小程序自定义评分组件(精确度0.1星)

Rolan 2017-10-6 00:53

自定义评分组件,不止于1星、半星,精确到0.1星。

自定义评分组件,不止于1星、半星,精确到0.1星。

自定义评分组件 
实现思路

星星分两种形态,一种代表实心评分,一种代表空心未评分。实星和空星完全重叠,大小必需保持一致,实星叠于空星之上,根据评分设置实星的宽来显示评分。 
全五星代表10分,一颗星就是2分,精确到0.1,一颗星就分为20份。

源码

rating.wxml

  1. name="rating">
  2. class='rating-on'
  3. style='width:{{rating >= 2 ? 1 : rating*10%20/20}}em'
  4. >
  5. class='rating-off'>
  6. class='rating-on'
  7. style='width:{{rating >= 4 ? 1 : rating < 2 ? 0 : rating*10%20/20}}em'
  8. >
  9. class='rating-off'>
  10. class='rating-on'
  11. style='width:{{rating >= 6 ? 1 : rating < 4 ? 0 : rating*10%20/20}}em'
  12. >
  13. class='rating-off'>
  14. class='rating-on'
  15. style='width:{{rating >= 8 ? 1 : rating < 6 ? 0 : rating*10%20/20}}em'
  16. >
  17. class='rating-off'>
  18. style='width:{{rating == 10 ? 1 : rating < 8 ? 0 : rating*10%20/20}}em'
  19. >
  20. class='rating-off'>

rating.wxss

  1. .rating-on {
  2. color: black;
  3. position: absolute;
  4. overflow: hidden;
  5. }
  6. .rating-off {
  7. color: #DBDBDB;
  8. }
  9. .rating-on:not(:last-child),
  10. .rating-off:not(:last-child) {
  11. margin-right: 0.2em;
  12. }

使用

page.wxml

  1. src='../common/rating/rating.wxml' />
  2. is='rating' data='{{rating:rating.average}}' />

page.wxss

  1. @import '../common/rating/rating';

我使用的特殊符号,也可使用图片,保证尺寸一致就行。评分组件实现方式很多,我也许是初学,若有更佳实现方式请赐教。

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: 红叶丶秋鸣 来自: 简书

相关阅读

  • Rolan 2017-10-12 17:56
    huang1818: 学习一下,虽然目前还用不到,谢谢分享
    可以的
  • huang1818 2017-10-7 10:56
    学习一下,虽然目前还用不到,谢谢分享