微信小程序使用template標(biāo)簽實現(xiàn)五星評分功能
前言
微信小程序特點“無須安裝，無須卸載，觸手可及，用完即走”，適合輕量級應(yīng)用快速開發(fā)。小程序模版思想是它開發(fā)的核心思想，可以幫助開發(fā)者減少很多重復(fù)代碼，我們來看看怎么在小程序中實現(xiàn)市面上常用的評分組件, 看看效果圖：
創(chuàng)建模版
wxml文件：
以<template>為根節(jié)點，添加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" /> <!--這里引用模板文件最好使用相對路徑-->
<template is="starsTemplate" data="{{stars:stars,score:average}}" /> <!--is指定使用模版的名稱-->
引用wxss模版：
在使用模版文件對應(yīng)的wxss文件中輸入以下表達式即可
@import "../stars/stars-template.wxss";
數(shù)據(jù)裝換：
我看到在使用模版wxml文件時有個data=“{{stars:stars,score:average}}”屬性和數(shù)據(jù)，表示指定模版的數(shù)據(jù)，我們一般從后臺獲取的評分?jǐn)?shù)據(jù)一般都是一個數(shù)字，比如：3.5，4，5等等，我們需要把這些數(shù)字轉(zhuǎn)換成五個等級數(shù)組，決定評分星星顯示什么圖片，這里我們用1表示顯示高亮的，0表示灰色星星，我們也可以在一個2表示半顆高亮的星星表示0.5的評分：
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é)束了，我們這評分轉(zhuǎn)換成我們需要的評分?jǐn)?shù)組，在使用模版的地方傳入數(shù)據(jù)即可。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要詳細(xì)介紹了vue 自定義指令directive的使用場景，文中有詳細(xì)的代碼示例，感興趣的小伙伴歡迎閱讀2023-04-04
微信小程序?qū)崿F(xiàn)授權(quán)登錄之獲取用戶信息
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)授權(quán)登錄之獲取用戶信息，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
這篇文章主要介紹了基于BootStrap實現(xiàn)簡潔注冊界面,需要的朋友可以參考下2017-07-07
開發(fā)中我們經(jīng)常需要將一個String和多個String值進行比較。直覺反應(yīng)是使用||符號連接多個===完成，感興趣的朋友可以了解下哈2013-04-04
把項目里很土的彈窗，改成了遮罩層顯示，現(xiàn)在感覺好多了。在這里創(chuàng)建一個div和body一樣大小，這樣就可以把整個頁面全部蓋住了，具體實現(xiàn)祥看本文，希望可以幫助到你2013-05-05
把Xml字段先讀出來，然后用Js去操作，這樣豈不是簡單了許多，于是網(wǎng)上搜索了一些JS讀Xml字段信息的方法2014-10-10
JS實現(xiàn)點擊文字對應(yīng)DIV層不停閃動效果的方法
這篇文章主要介紹了JS實現(xiàn)點擊文字對應(yīng)DIV層不停閃動效果的方法,實例分析了javascript操作div層的效果,非常實用,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
在前端js編程中,如果涉及到加密通信、加密算法,經(jīng)常會用到密鑰,但密鑰,很容易暴露,?暴露原因：js代碼透明,在瀏覽器中可以查看源碼,從中找到密鑰,所以本文給大家介紹了前端js中如何保護密鑰,需要的朋友可以參考下2024-10-10
JavaScript中的Array 對象（數(shù)組對象）
Array 對象用于在單個的變量中存儲多個值。2016-06-06
這篇文章主要介紹了JavaScript函數(shù)作用域鏈,實例分析了函數(shù)作用域鏈的原理與使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02