微信小程序?qū)崿F(xiàn)星級評分與展示

更新時(shí)間：2022年05月23日 10:04:40 作者：J1FengZ

這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)星級評分與展示，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)星級評分與展示的具體代碼，供大家參考，具體內(nèi)容如下

一、效果展示

星級評分

星級評分展示

二、代碼實(shí)現(xiàn)

星級評分部分：

<!-- wxml -->
<view class="starGrade">
? ? <text class="starGradeTxt">評價(jià)</text>
? ? <view class='scoreBox'>
? ? ? ? <view wx:for="{{starImgs}}" wx:key="id" bindtap='select' data-index="{{item.id}}">
? ? ? ? ? ? <image class="star" src="{{item.id > starId ? star_empty : star_full}}"></image>
? ? ? ? </view>
? ? ? ? <view class='scoreLevel'>{{starImgs[starId - 1].level}}</view>
? ? </view>
</view>

// js
Page({
? ? data:{
? ? ? ? starImgs: [
? ? ? ? ? ? {
? ? ? ? ? ? ? ? id: 1,
? ? ? ? ? ? ? ? level : '非常不推薦',
? ? ? ? ? ? },?
? ? ? ? ? ? {
? ? ? ? ? ? ? ? id: 2,
? ? ? ? ? ? ? ? level : '不推薦',
? ? ? ? ? ? },?
? ? ? ? ? ? {
? ? ? ? ? ? ? ? id: 3,
? ? ? ? ? ? ? ? level : '一般',
? ? ? ? ? ? },?
? ? ? ? ? ? {
? ? ? ? ? ? ? ? id: 4,
? ? ? ? ? ? ? ? level : '推薦',
? ? ? ? ? ? },?
? ? ? ? ? ? {
? ? ? ? ? ? ? ? id: 5,
? ? ? ? ? ? ? ? level : '非常推薦',
? ? ? ? ? ? }
? ? ? ? ],
? ? ? ? starId: 5,
? ? ? ? star_full: '/icons/score_full_big.png',//星星圖標(biāo) 滿星
? ? ? ? star_empty: '/icons/score_empty_big.png',//星星圖標(biāo) 空星
? ? },
? ??
? ? /**
? ? ?* 星級評分點(diǎn)擊事件
? ? ?*/
? ? select(e) {
? ? ? ? this.data.starId = e.currentTarget.dataset.index;
? ? ? ? this.setData({
? ? ? ? ? ? starId : this.data.starId,
? ? ? ? })
? ? },
})

星級評分展示

<!-- wxml -->
<wxs module="filters" src="../../tools/filter.wxs"></wxs>
<!-- 星級評分展示 -->
<view class="container">
? ? <text class="score">{{filters.toFix(Info.grade)}}</text>
? ? <view?
? ? ? ? class="stars"?
? ? ? ? wx:for="{{[1, 2, 3, 4, 5]}}"?
? ? ? ? wx:key="{{index}}"?
? ? ? ? wx:for-item="i">
? ? ? ? <view class="star-full" wx:if="{{Info.grade >= index + 1}}">
? ? ? ? ? ? <image class="image-star" src="../../icons/score_full.png" />
? ? ? ? </view>
? ? ? ? <view class="star-empty" wx:else>
? ? ? ? ? ? <image class="image-star" src="../../icons/score_empty.png" />
? ? ? ? </view>
? ? </view>
</view>

// filter.wxs
var filters = {
? ? toFix: function (value) { ? ? ??
? ? ? ? var valueNum = parseFloat(value);
? ? ? ? return valueNum.toFixed(1)
? ? ? ? // 保留一位小數(shù)
? ? }
}
?
module.exports = {
? ? toFix: filters.toFix,
}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: