小程式自定義星星評價

2021-10-09 13:00:34 字數 1200 閱讀 7503

在專案中需要用到五星評價,但是找的元件都是只能點亮半顆星 或者一顆星星,不能實現3.7,4.2這樣的評分,而且此需求不能改。。。。所以就自己琢磨了乙個方法。

效果如下:

思路如下

每個小星星都是乙個正方形,中間是透明的,然後無間隙排在一起放在乙個父盒子裡。父盒子高和星星一樣高,寬,根據實際評分來動態實現,最寬是五分。然後給父盒子乙個背景色即可

**如下

style

="width

: 150rpx;

">

class

="img-bg"

style

="width:

}rpx

" >

style

="width

: 150rpx;

">

src=

"/static/image/start2.png"

class

="start"

>

image

>

src=

"/static/image/start2.png"

class

="start"

>

image

>

src=

"/static/image/start2.png"

class

="start"

>

image

>

src=

"/static/image/start2.png"

class

="start"

>

image

>

src=

"/static/image/start2.png"

class

="start"

>

image

>

view

>

view

>

view

>

//樣式如下

.start

.img-bg

自定義RatingBar(星星)

原文 android系統自帶ratingbar,無法直接指定寬高,不然會出現無法全部顯示的情況,使用系統自帶的兩個主題 android attr ratingbarstyleindicator和 android attr ratingbarstylesmall 也只能做到固定小版或者大版。按照以下幾...

小程式自定義TabBar

tabbar requiredbackgroundmodes audio location debug true,sitemaplocation sitemap.json 查資料發現,tabbar的list下的第一項的路徑必須對應於pages配置下的第乙個頁面。因此,將tabbar中list的第乙個...

小程式自定義Tabbar

最近我司改版小程式主頁,個性化了tabbar欄,功能如下 1 預設首頁顯示大圖示,滾動到一定位置,顯示gotop圖示,點選可返回頂部 滑動到頂部也可還原圖示 還原圖示 2 其他tabbar頁類似 在此簡單做個記錄 tabbar 3 在components資料夾內新增自定義custom tab bar...