欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序動態(tài)評分展示/五角星展示/半顆星展示/自定義長度展示功能的實現

 更新時間:2020年07月22日 14:51:09   作者:蘇小蘇sxs  
這篇文章主要介紹了微信小程序動態(tài)評分展示/五角星展示/半顆星展示/自定義長度展示的實現,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下

一、前言

項目中遇到的評分相關的需求其實還挺多。之前也寫過網頁中關于評分功能實現的文檔。這次,是基于微信小程序開發(fā)而提煉出一個簡單方便使用的方法,網頁開發(fā)中同樣可用。這次使用的還是字體,主要是字體這個比較通用,顏色,大小都可以自己定義。當然了,來的最快的其實是用圖片代替。

二、微信小程序中評分功能實現

1.css文件中引入字體文件。也可以點此下載字體文件

@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.根據自己項目的需求寫出五角星的樣式。參考下面

.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)實現五角星評分

1.如果是靜態(tài)實現,可以直接設置寬度來實現評分效果,直接定義需要變色的五角形的比例。如果是顆星可以直接定義偽類元素寬度是50%;如果是1/3顆星可以定義寬度是33%;同樣的,如果是2/3顆星星,直接定義寬度為66%。如下

/*自定義長度的黃色五角星*/
.half_star .icon_yellow:before {width: 50%;} 

2.html的代碼如下

 <view >
  <view style="font-size:12px;color:#aaa;text-align:center;margin-top:5px;">靜態(tài)評價星級</view>
  <view style="font-size:32px;color:#f63;text-align:center;margin-top:5px;">4.50</view>
  <view style="width:105px;margin:0 auto">
   <view style="display:flex;">  
    <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.實現效果如下圖

四、動態(tài)實現評價打分效果

1.樣式同(二、微信小程序中評分功能實現)上。只是定義寬度的地方是動態(tài)賦值的。

2.定義需要展示的初始屬性值。分別是要展示的黃色五角星,灰色五角星,以及那顆需要打分的的黃色五角星

Page({
 /**
 * 頁面的初始數據
 */
 data: { 
 yellow_start:0,//黃色五角星,默認一開始是黃色星星0分
 gray_start:5,//灰色五角星 灰色星星是5顆 表示是5分
 start_per:0,//自定義長度黃色五角星 一開始需要打的是0分
 }
})

3.根據返回的結果改變初始化的數據 ,比如,后臺返回的評分是3.62分

var start="3.62";//后臺獲取的評分
var yellow_start=parseInt(start);//需要展示的整個黃色5角星,3.62分的時候需要展示3顆整個的黃色五角星。
var start_per=parseFloat(start-yellow_start)*100;//3.62顆評價分-3顆整個黃色星,是0.62的占比,先將它*100。這樣賦值的時候比較方便。也就是一顆灰色的星星中展示出62%的黃色部位。
var gray_start=parseInt(5-start);//需要展示的灰色星星,正常是5-3.62=1.38顆,0.38顆已經是在百分比中了。所以此時最后需要展示的是1整個灰色五角星
this.setData({ 
 start:start, //評分數  
 yellow_start:yellow_start,//整個黃色五角星的個數
 start_per:start_per,//一顆灰色五角星中黃色五角星的占比
 gray_start:gray_start,//整個灰色五角星的數量
})

4.最后一步就是頁面中如何渲染的問題了。由于微信小程序中無法實現動態(tài)修改偽類元素的樣式值【可能是我不會,會的同學可以指點一下】,所以,那顆占百分比的黃色五角星,我用的是底部一個灰色五角星+覆蓋一個黃色五角星,都是用的絕對定位,最后黃色五角星用的是width+overflow:hidden 把多余的部位隱藏了。

<view>
  <view style="font-size:12px;color:#aaa;text-align:center;margin-top:5px;">動態(tài)評價星級</view>
  <view style="font-size:32px;color:#f63;text-align:center;margin-top:5px;">{{start}}</view>
  <view style="width:105px;margin:0 auto">
   <view style="display:flex;">   
    <view class="start" wx:for="{{yellow_start}}"><view class="icon icon_yellow"></view></view>
    <view wx:if="{{start_per>0}}" class="start" style="position:relative;">
            <view class="icon icon_gray"></view>
            <view class="icon icon_yellow "style="width:{{start_per}}%;overflow:hidden;position:absolute;left:0;top:0;"></view>
          </view>
    <view class="start" wx:for="{{gray_start}}"><view class="icon icon_gray"></view></view>
   </view>  
  </view>   
</view> 

5.實現效果圖如下:

五、總結

這個效果的實現無非就三點。第一點引用字體。第二點比較重要,就是如何用css畫出想要的五角星,至于動態(tài)實現那塊其實一點也不難,思路清晰了,自然就水到渠成了。

到此這篇關于微信小程序動態(tài)評分展示/五角星展示/半顆星展示/自定義長度展示功能的實現的文章就介紹到這了,更多相關微信小程序評分展示內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!

相關文章

  • 詳解webpack自定義loader初探

    詳解webpack自定義loader初探

    這篇文章主要介紹了webpack自定義loader初探,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-08-08
  • js 頁面關閉前的出現提示的實現代碼

    js 頁面關閉前的出現提示的實現代碼

    主流的瀏覽器都支持onbeforeunload事件(即頁面卸載前觸發(fā)的事件),而現在大多網站都用到了此功能
    2011-05-05
  • es6數據變更同步到視圖層的方法

    es6數據變更同步到視圖層的方法

    這篇文章主要介紹了es6數據變更同步到視圖層的方法,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2019-03-03
  • JavaScript中去掉數組中的重復值的實現方法

    JavaScript中去掉數組中的重復值的實現方法

    百度面試時問的一道題目,蠻常規(guī)的,但是當時自己的回答挺差勁的。現在總結記錄下~
    2011-08-08
  • 微信小程序實現文字從右向左無限滾動

    微信小程序實現文字從右向左無限滾動

    這篇文章主要為大家詳細介紹了微信小程序實現文字從右向左無限滾動,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2018-12-12
  • 腳本控制自適應高度的縮短問題

    腳本控制自適應高度的縮短問題

    腳本控制自適應高度的縮短問題...
    2007-10-10
  • JS回調函數簡單用法示例

    JS回調函數簡單用法示例

    這篇文章主要介紹了JS回調函數簡單用法,結合實例形式分析了js回調函數的定義與簡單使用方法,具有一定參考借鑒價值,需要的朋友可以參考下
    2017-02-02
  • TypeScript 中如何限制對象鍵名的取值范圍

    TypeScript 中如何限制對象鍵名的取值范圍

    TypeScript由微軟開發(fā)的自由和開源的編程語言,是一種給 JavaScript 添加特性的語言擴展,接下來通過本文給大家介紹TypeScript 中如何限制對象鍵名的取值范圍,感興趣的朋友跟隨小編一起看看吧
    2021-05-05
  • JS實現圖片輪播跑馬燈

    JS實現圖片輪播跑馬燈

    這篇文章主要為大家詳細介紹了原生JS實現圖片輪播跑馬燈效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-07-07
  • 如何使用webpack5+TypeScript+npm發(fā)布組件庫

    如何使用webpack5+TypeScript+npm發(fā)布組件庫

    這篇文章主要介紹了如何使用webpack5+TypeScript+npm發(fā)布組件庫,本文通過實例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧
    2024-04-04

最新評論