微信小程序?qū)崿F(xiàn)五星評(píng)價(jià)
更新時(shí)間：2022年08月28日 10:03:14 作者：花笙_
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)五星評(píng)價(jià)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)五星評(píng)價(jià)的具體代碼，供大家參考，具體內(nèi)容如下
首先準(zhǔn)備兩張圖片，在阿里巴巴矢量圖標(biāo)庫(kù)中隨便下兩個(gè)顏色不一樣的星星
效果如下
wxml
循環(huán)五次圖片，添加點(diǎn)擊事件
<view class="card_start flex">
? ? <span style="font-size: 28rpx;">服務(wù)評(píng)價(jià)</span>
? ??? ?<image class="imagecls" wx:for="{{5}}" wx:key="index" data-name="technicianAssessStar" data-item="{{item}}"
? ? src="{{item-technicianAssessStar+1>0?'/image/self_img/start-noColor.png':'/image/self_img/start-color.png'}}"
? ? bindtap="start_technician"></image>
? ? <span class="ft-size-28 titleRight">{{technician_content}}</span>
</view>默認(rèn)五顆星（超贊）
js
data:{
?? ?technicianAssessStar: 5, // 服務(wù)技師評(píng)價(jià)，默認(rèn)五顆星
?? ?technician_content:'超贊',
}
// 服務(wù)評(píng)價(jià) 技師
? start_technician: function (e) {
? ? var technicianAssessStar = e.currentTarget.dataset.item + 1;
? ? var variable = e.currentTarget.dataset.name;
? ? console.log(technicianAssessStar, e)
? ? console.log(variable)
? ? if (variable === "technicianAssessStar")
? ? ? if (technicianAssessStar === 1) {
? ? ? ? this.setData({
? ? ? ? ? technician_content: '很差',
? ? ? ? })
? ? ? } else if (technicianAssessStar === 2) {
? ? ? this.setData({
? ? ? ? technician_content: '差',
? ? ? })
? ? } else if (technicianAssessStar === 3) {
? ? ? this.setData({
? ? ? ? technician_content: '一般',
? ? ? })
? ? } else if (technicianAssessStar === 4) {
? ? ? this.setData({
? ? ? ? technician_content: '贊',
? ? ? })
? ? } else if (technicianAssessStar === 5) {
? ? ? this.setData({
? ? ? ? technician_content: '超贊',
? ? ? })
? ? }
? ? this.setData({
? ? ? technicianAssessStar: technicianAssessStar,
? ? })
? },打印的數(shù)據(jù)
wxss
.flex {
? display: flex;
}
.card_start {
? margin-top: 32rpx;
}
.imagecls {
? height: 45rpx;
? width: 45rpx;
? padding: 0 20rpx;
}
.ft-size-28 {
? font-size: 28rpx;
}
.titleRight {
? color: rgba(0, 0, 0, 0.25)
}以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript性能陷阱小結(jié)(附實(shí)例說(shuō)明)
JavaScript陷阱太多，因此我們得步步為營(yíng)，下面這些點(diǎn)，相信很多同學(xué)都會(huì)遇到，希望朋友們多注意下。JavaScript陷阱太多，因此我們得步步為營(yíng)，下面是一些常見(jiàn)的影響性能的陷阱。2010-12-12
JavaScript?ECMAScript?6(ES2015~ES2022)所有新特性總結(jié)
這篇文章主要介紹了JavaScript?ECMAScript?6(ES2015~ES2022)所有新特性總結(jié),文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-07-07
uniapp開(kāi)發(fā)h5項(xiàng)目引入第三方j(luò)s(sdk)兩種方法
這篇文章主要給大家介紹了關(guān)于uniapp開(kāi)發(fā)h5項(xiàng)目引入第三方j(luò)s(sdk)的兩種方法,在Uniapp中引入JS文件是一項(xiàng)常見(jiàn)的操作,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-02-02
TypeScript是一種強(qiáng)大的編程語(yǔ)言,它在JavaScript的基礎(chǔ)上添加了靜態(tài)類型檢查,使得代碼更加可維護(hù)和類型安全,在TypeScript中,類和接口是構(gòu)建復(fù)雜應(yīng)用程序的關(guān)鍵組成部分,本文將深入探討TypeScript中類與接口的使用,需要的朋友可以參考下2023-09-09
webpack實(shí)現(xiàn)熱加載自動(dòng)刷新的方法
本文介紹了webpack實(shí)現(xiàn)熱加載自動(dòng)刷新的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
JS實(shí)現(xiàn)適合于后臺(tái)使用的動(dòng)畫(huà)折疊菜單效果
這篇文章主要介紹了JS實(shí)現(xiàn)適合于后臺(tái)使用的動(dòng)畫(huà)折疊菜單效果,實(shí)例展示了兩種折疊菜單顯示效果,涉及JavaScript響應(yīng)鼠標(biāo)事件動(dòng)態(tài)遍歷及改變頁(yè)面元素樣式的實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-09-09
Bootstrap開(kāi)關(guān)(switch)控件學(xué)習(xí)筆記分享
這篇文章主要為大家分享了Bootstrap開(kāi)關(guān)(switch)控件學(xué)習(xí)筆記，介紹了Bootstrap開(kāi)關(guān)(switch)控件的功能、使用說(shuō)明，感興趣的小伙伴們可以參考一下2016-05-05
JS圖片預(yù)加載三種實(shí)現(xiàn)方法解析
這篇文章主要介紹了JS圖片預(yù)加載三種實(shí)現(xiàn)方法解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-05-05
js獲取上傳文件大小在ie下要改安全設(shè)置中的對(duì)為標(biāo)記為可安全執(zhí)行腳本的ActiveX空間初始化并執(zhí)行,需要的朋友可以參考下2014-04-04
JavaScript對(duì)象數(shù)組排序函數(shù)及六個(gè)用法
本文給大家分享一個(gè)用于數(shù)組或者對(duì)象的排序的函數(shù)。該函數(shù)可以以任意深度的數(shù)組或者對(duì)象的值作為排序基數(shù)對(duì)數(shù)組或的元素進(jìn)行排序2015-12-12