小程序模板网

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

2018-01-02 多田翁

自定义评分组件,不止于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.  
  7. class='rating-on'
  8. style='width:{{rating >= 4 ? 1 : rating < 2 ? 0 : rating*10%20/20}}em'
  9. >
  10. class='rating-off'>
  11.  
  12. class='rating-on'
  13. style='width:{{rating >= 6 ? 1 : rating < 4 ? 0 : rating*10%20/20}}em'
  14. >
  15. class='rating-off'>
  16.  
  17. class='rating-on'
  18. style='width:{{rating >= 8 ? 1 : rating < 6 ? 0 : rating*10%20/20}}em'
  19. >
  20. class='rating-off'>
  21.  
  22. style='width:{{rating == 10 ? 1 : rating < 8 ? 0 : rating*10%20/20}}em'
  23. >
  24. class='rating-off'>
  25.  
  26.  

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';

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



易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/18343.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询