溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

微信小程序使用template標(biāo)簽實(shí)現(xiàn)五星評(píng)分功能

發(fā)布時(shí)間：2020-10-09 01:19:08 來源：腳本之家 閱讀：276 作者：T丶快樂知己丬 欄目：web開發(fā)

前言

微信小程序特點(diǎn)“無須安裝，無須卸載，觸手可及，用完即走”，適合輕量級(jí)應(yīng)用快速開發(fā)。小程序模版思想是它開發(fā)的核心思想，可以幫助開發(fā)者減少很多重復(fù)代碼，我們來看看怎么在小程序中實(shí)現(xiàn)市面上常用的評(píng)分組件, 看看效果圖：

微信小程序使用template標(biāo)簽實(shí)現(xiàn)五星評(píng)分功能

創(chuàng)建模版

wxml文件：

以<template>為根節(jié)點(diǎn)，添加name屬性用來區(qū)分不同模版：

<template name="starsTemplate">
 <view class='stars-container'>
  <view class='stars'>
  <block wx:for="{{stars}}" wx:for-item="i" wx:key="position">
   <image wx:if="{{i}}" src='/images/icon/star.png'></image>
    <!-- <image wx:elif="{{i==2}}" src='/images/icon/none-star.png'></image> -->
    <image wx:else src='/images/icon/none-star.png'></image>
  </block>
  </view>
  <text class='star-score'>{{score}}</text>
 </view>
</template>

wxss文件：

這里我們采用小程序推薦使用flex模型，橫向排列五顆星星圖片。

.stars-container {
 display: flex;
 flex-direction: row;
}
.stars {
 display: flex;
 flex-direction: row;
 height: 17rpx;
 margin-right: 24rpx;
 margin-top: 6rpx;
}
.stars image {
 padding-left: 3rpx;
 height: 17rpx;
 width: 17rpx;
}
.star-score {
 color: #1f3463;
}

模版使用

引用wxml模版：

<import src="../stars/stars-template.wxml" /> <!--這里引用模板文件最好使用相對(duì)路徑-->
<template is="starsTemplate" data="{{stars:stars,score:average}}" /> <!--is指定使用模版的名稱-->

引用wxss模版：

在使用模版文件對(duì)應(yīng)的wxss文件中輸入以下表達(dá)式即可

@import "../stars/stars-template.wxss";

數(shù)據(jù)裝換：

我看到在使用模版wxml文件時(shí)有個(gè)data=“{{stars:stars,score:average}}”屬性和數(shù)據(jù)，表示指定模版的數(shù)據(jù)，我們一般從后臺(tái)獲取的評(píng)分?jǐn)?shù)據(jù)一般都是一個(gè)數(shù)字，比如：3.5，4，5等等，我們需要把這些數(shù)字轉(zhuǎn)換成五個(gè)等級(jí)數(shù)組，決定評(píng)分星星顯示什么圖片，這里我們用1表示顯示高亮的，0表示灰色星星，我們也可以在一個(gè)2表示半顆高亮的星星表示0.5的評(píng)分：

function convertToStarsArray(stars) {
 var num = stars.toString().substring(0, 1);
 var array = [];
 for (var i = 1; i <= 5; i++) {
  if (i < num) {
   array.push(1);
  } else {
   array.push(0);
  }
 }
 return array;
}

案例wxml代碼：

<import src="stars/stars-template.wxml" />
<view style='margin:100rpx'>
 <template is="starsTemplate" data="{{stars:stars,score:average}}" />
</view>

到這里基本結(jié)束了，我們這評(píng)分轉(zhuǎn)換成我們需要的評(píng)分?jǐn)?shù)組，在使用模版的地方傳入數(shù)據(jù)即可。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手