微信小程序使用template標(biāo)簽實(shí)現(xiàn)五星評(píng)分功能
前言
微信小程序特點(diǎn)“無須安裝,無須卸載,觸手可及,用完即走”,適合輕量級(jí)應(yīng)用快速開發(fā)。小程序模版思想是它開發(fā)的核心思想,可以幫助開發(fā)者減少很多重復(fù)代碼,我們來看看怎么在小程序中實(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ù)即可。
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 微信小程序?qū)崿F(xiàn)星級(jí)評(píng)分
- 微信小程序?qū)崿F(xiàn)星級(jí)評(píng)分和展示
- 微信小程序?qū)崿F(xiàn)星星評(píng)分效果
- 微信小程序動(dòng)態(tài)評(píng)分展示/五角星展示/半顆星展示/自定義長度展示功能的實(shí)現(xiàn)
- 微信小程序?qū)崿F(xiàn)展示評(píng)分結(jié)果功能
- 微信小程序中的店鋪評(píng)分組件及vue中用svg實(shí)現(xiàn)的評(píng)分顯示組件
- 微信小程序 五星評(píng)分的實(shí)現(xiàn)實(shí)例
- 微信小程序五星評(píng)分效果實(shí)現(xiàn)代碼
- 微信小程序 五星評(píng)分(包括半顆星評(píng)分)實(shí)例代碼
- 微信小程序?qū)崿F(xiàn)星級(jí)評(píng)分與展示
相關(guān)文章
超越Jquery_01_isPlainObject分析與重構(gòu)
isPlainObject是Jquery1.4后提供的新方法,用于判斷對(duì)象是否是純粹的對(duì)象(通過 {} 或者 new Object 創(chuàng)建的)。2010-10-10項(xiàng)目實(shí)踐一圖片上傳之form表單還是base64前端圖片壓縮(前端圖片壓縮)
這篇文章主要介紹了項(xiàng)目實(shí)踐一圖片上傳之form表單還是base64前端圖片壓縮(前端圖片壓縮)的相關(guān)資料,需要的朋友可以參考下2016-07-07當(dāng)前流行的JavaScript代碼風(fēng)格指南
這篇文章主要介紹了當(dāng)前流行的JavaScript代碼風(fēng)格指南,同時(shí)推薦了一款風(fēng)格檢驗(yàn)工具jshint,可以配合大多數(shù)的編輯器統(tǒng)一團(tuán)隊(duì)代碼風(fēng)格,需要的朋友可以參考下2014-09-09d3.js 地鐵軌道交通項(xiàng)目實(shí)戰(zhàn)
這篇文章主要介紹了d3.js 地鐵軌道交通項(xiàng)目實(shí)戰(zhàn),本文通過實(shí)例代碼項(xiàng)目截圖給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-11-11關(guān)于JavaScript數(shù)組你所不知道的3件事
這篇文章主要為大家詳細(xì)介紹了關(guān)于JavaScript數(shù)組三個(gè)并不那么常見的功能,你所不知道的事情,感興趣的小伙伴們可以參考一下2016-08-08使用mpvue搭建一個(gè)初始小程序及項(xiàng)目配置方法
這篇文章主要介紹了使用mpvue搭建一個(gè)初始小程序及項(xiàng)目配置方法,需要的朋友可以參考下2018-12-12