小程序自定義評分組件（精確度0.1星）
發(fā)布時間：2018-01-02 09:08 所屬欄目：小程序開發(fā)教程
自定義評分組件，不止于1星、半星，精確到0.1星。
自定義評分組件，不止于1星、半星，精確到0.1星。
自定義評分組件
實現(xiàn)思路
星星分兩種形態(tài)，一種代表實心評分，一種代表空心未評分。實星和空星完全重疊，大小必需保持一致，實星疊于空星之上，根據(jù)評分設(shè)置實星的寬來顯示評分。
全五星代表10分，一顆星就是2分，精確到0.1，一顆星就分為20份。
源碼
rating.wxml
-
-
-
-
style='width:{{rating >= 2 ? 1 : rating*10%20/20}}em' -
> -
-
-
-
style='width:{{rating >= 4 ? 1 : rating < 2 ? 0 : rating*10%20/20}}em' -
> -
-
-
-
style='width:{{rating >= 6 ? 1 : rating < 4 ? 0 : rating*10%20/20}}em' -
> -
-
-
-
style='width:{{rating >= 8 ? 1 : rating < 6 ? 0 : rating*10%20/20}}em' -
> -
-
-
-
style='width:{{rating == 10 ? 1 : rating < 8 ? 0 : rating*10%20/20}}em' -
> -
rating.wxss
-
.rating-on { -
color: black; -
position: absolute; -
overflow: hidden; -
} -
.rating-off { -
color: #DBDBDB; -
} -
.rating-on:not(:last-child), -
.rating-off:not(:last-child) { -
margin-right: 0.2em; -
}
使用
page.wxml
page.wxss
-
@import '../common/rating/rating';
我使用的特殊符號，也可使用圖片，保證尺寸一致就行。評分組件實現(xiàn)方式很多，我也許是初學(xué)，若有更佳實現(xiàn)方式請賜教。
