您好,登錄后才能下訂單哦!
這篇文章主要為大家展示了微信小程序如何實(shí)現(xiàn)動(dòng)態(tài)評分展示/五角星展示/半顆星展示/自定義長度展示功能,內(nèi)容簡而易懂,希望大家可以學(xué)習(xí)一下,學(xué)習(xí)完之后肯定會(huì)有收獲的,下面讓小編帶大家一起來看看吧。
一、前言
項(xiàng)目中遇到的評分相關(guān)的需求其實(shí)還挺多。之前也寫過網(wǎng)頁中關(guān)于評分功能實(shí)現(xiàn)的文檔。這次,是基于微信小程序開發(fā)而提煉出一個(gè)簡單方便使用的方法,網(wǎng)頁開發(fā)中同樣可用。這次使用的還是字體,主要是字體這個(gè)比較通用,顏色,大小都可以自己定義。當(dāng)然了,來的最快的其實(shí)是用圖片代替。
二、微信小程序中評分功能實(shí)現(xiàn)
1.css文件中引入字體文件。也可以點(diǎn)此下載字體文件
@font-face { font-family: 'FontAwesome'; src: url('https://netdna.bootstrapcdn.com/font-awesome/3.2.1/font/fontawesome-webfont.woff?v=3.2.1') format('woff'); }
2.根據(jù)自己項(xiàng)目的需求寫出五角星的樣式。參考下面
.start{margin-right:10rpx;}/*五角星之間的間距*/ /*五角星*/ .start .icon:before {content: '\f005'; font-family: FontAwesome; position: absolute;left: 0;top: 0;display: block; overflow: hidden;} .start .icon {display: block; font-size: 21px; text-align: center; width: 38rpx;height: 56rpx;line-height: 56rpx;position: relative;white-space: pre;} /*灰色五角星*/ .start .icon_gray{color:#aaa} /*黃色五角星*/ .start .icon_yellow:before {color: #F63;}
三、靜態(tài)實(shí)現(xiàn)五角星評分
1.如果是靜態(tài)實(shí)現(xiàn),可以直接設(shè)置寬度來實(shí)現(xiàn)評分效果,直接定義需要變色的五角形的比例。如果是顆星可以直接定義偽類元素寬度是50%;如果是1/3顆星可以定義寬度是33%;同樣的,如果是2/3顆星星,直接定義寬度為66%。如下
/*自定義長度的黃色五角星*/ .half_star .icon_yellow:before {width: 50%;}
2.html的代碼如下
<view > <view >靜態(tài)評價(jià)星級</view> <view >4.50</view> <view > <view > <view class="start"><view class="icon icon_yellow"></view></view> <view class="start"><view class="icon icon_yellow"></view></view> <view class="start"><view class="icon icon_yellow"></view></view> <view class="start"><view class="icon icon_yellow"></view></view> <view class="start half_star"><view class="icon icon_gray"><view class="icon icon_yellow"></view></view></view> </view> </view> </view>
3.實(shí)現(xiàn)效果如下圖
四、動(dòng)態(tài)實(shí)現(xiàn)評價(jià)打分效果
1.樣式同(二、微信小程序中評分功能實(shí)現(xiàn))上。只是定義寬度的地方是動(dòng)態(tài)賦值的。
2.定義需要展示的初始屬性值。分別是要展示的黃色五角星,灰色五角星,以及那顆需要打分的的黃色五角星
Page({ /** * 頁面的初始數(shù)據(jù) */ data: { yellow_start:0,//黃色五角星,默認(rèn)一開始是黃色星星0分 gray_start:5,//灰色五角星 灰色星星是5顆 表示是5分 start_per:0,//自定義長度黃色五角星 一開始需要打的是0分 } })
3.根據(jù)返回的結(jié)果改變初始化的數(shù)據(jù) ,比如,后臺返回的評分是3.62分
var start="3.62";//后臺獲取的評分 var yellow_start=parseInt(start);//需要展示的整個(gè)黃色5角星,3.62分的時(shí)候需要展示3顆整個(gè)的黃色五角星。 var start_per=parseFloat(start-yellow_start)*100;//3.62顆評價(jià)分-3顆整個(gè)黃色星,是0.62的占比,先將它*100。這樣賦值的時(shí)候比較方便。也就是一顆灰色的星星中展示出62%的黃色部位。 var gray_start=parseInt(5-start);//需要展示的灰色星星,正常是5-3.62=1.38顆,0.38顆已經(jīng)是在百分比中了。所以此時(shí)最后需要展示的是1整個(gè)灰色五角星 this.setData({ start:start, //評分?jǐn)?shù) yellow_start:yellow_start,//整個(gè)黃色五角星的個(gè)數(shù) start_per:start_per,//一顆灰色五角星中黃色五角星的占比 gray_start:gray_start,//整個(gè)灰色五角星的數(shù)量 })
4.最后一步就是頁面中如何渲染的問題了。由于微信小程序中無法實(shí)現(xiàn)動(dòng)態(tài)修改偽類元素的樣式值【可能是我不會(huì),會(huì)的同學(xué)可以指點(diǎn)一下】,所以,那顆占百分比的黃色五角星,我用的是底部一個(gè)灰色五角星+覆蓋一個(gè)黃色五角星,都是用的絕對定位,最后黃色五角星用的是width+overflow:hidden 把多余的部位隱藏了。
<view> <view >動(dòng)態(tài)評價(jià)星級</view> <view >{{start}}</view> <view > <view > <view class="start" wx:for="{{yellow_start}}"><view class="icon icon_yellow"></view></view> <view wx:if="{{start_per>0}}" class="start" > <view class="icon icon_gray"></view> <view class="icon icon_yellow "></view> </view> <view class="start" wx:for="{{gray_start}}"><view class="icon icon_gray"></view></view> </view> </view> </view>
5.實(shí)現(xiàn)效果圖如下:
五、總結(jié)
這個(gè)效果的實(shí)現(xiàn)無非就三點(diǎn)。第一點(diǎn)引用字體。第二點(diǎn)比較重要,就是如何用css畫出想要的五角星,至于動(dòng)態(tài)實(shí)現(xiàn)那塊其實(shí)一點(diǎn)也不難,思路清晰了,自然就水到渠成了。
以上就是關(guān)于微信小程序如何實(shí)現(xiàn)動(dòng)態(tài)評分展示/五角星展示/半顆星展示/自定義長度展示功能的內(nèi)容,如果你們有學(xué)習(xí)到知識或者技能,可以把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。