微信小程序?qū)崿F(xiàn)評(píng)價(jià)功能

更新時(shí)間：2022年08月28日 11:36:00 作者：北方的木

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

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

首先去圖標(biāo)庫(kù)，找一個(gè)空心星圖片和一個(gè)實(shí)星圖片

先是效果圖

代碼

wxml文件

for循環(huán)5次，初始值是5星，data-name用于區(qū)別是那個(gè)評(píng)價(jià)的星星
src="{{item-total+1>0?’…/image/empty_stars.png’:’…/image/entity_stars.png’}}"
條件判斷，圖片判斷一個(gè)是空星，一個(gè)實(shí)星，根據(jù)自己圖片地址改變

<view class="view_page">
? <view class="content_cls">
? ? <view class="cross_column" style="margin-top: 50rpx;">
? ? ? <label>總體評(píng)價(jià)：</label>
? ? ? <image class="imagecls" wx:for="{{5}}" wx:key="{{index}}" data-name="total" data-item="{{item}}" src="{{item-total+1>0?'../image/empty_stars.png':'../image/entity_stars.png'}}" bindtap="img_bind"></image>
? ? </view>
? ? <view class="cross_column">
? ? ? <label>服務(wù)態(tài)度：</label>
? ? ? <image class="imagecls" wx:for="{{5}}" wx:key="{{index}}" data-name="service" data-item="{{item}}" src="{{item-service+1>0?'../image/empty_stars.png':'../image/entity_stars.png'}}" bindtap="img_bind"></image>
? ? </view>
? ? <view class="cross_column">
? ? ? <label>施工質(zhì)量：</label>
? ? ? <image class="imagecls" wx:for="{{5}}" wx:key="{{index}}" data-name="quality" data-item="{{item}}" src="{{item-quality+1>0?'../image/empty_stars.png':'../image/entity_stars.png'}}" bindtap="img_bind"></image>
? ? </view>
? ? <view class="cross_column">
? ? ? <label>維修時(shí)間：</label>
? ? ?<image class="imagecls" wx:for="{{5}}" wx:key="{{index}}" data-name="repairtime" data-item="{{item}}" src="{{item-repairtime+1>0?'../image/empty_stars.png':'../image/entity_stars.png'}}" bindtap="img_bind"></image>
? ? </view>
? ? <view class="cross_column" style="height:120rpx;margin-top:200rpx;margin-button:10rpx">
? ? ? <button bindtap="Reasons_bind" class="but_style">需要返修</button>
? ? ? <button class="but_style">確認(rèn)評(píng)價(jià)</button>
? ? </view>
? </view>
</view>

css樣式

如果需要實(shí)現(xiàn)我這種效果可以使用

/* pages/browse/evaluatepage.wxss */
/* 列合并 */
.cross_column {
? display: flex;
? height: 70rpx;
? line-height: 70rpx;
}

/* img圖片樣式 */
.imagecls {
? width: 70rpx;
? height: 70rpx;
}
/*按鈕樣式 */

.but_style {
?background-color: #f2a8b9;
? width: 200rpx;
? height: 100rpx;
? color: white;
}
/*報(bào)修評(píng)價(jià)內(nèi)容樣式 */

.content_cls {
? width: 70%;
? margin-left: 15%;
? background-color: white;
}
.content_cls view{
? margin-bottom: 50rpx;
}

最后就是js

先是初始化評(píng)價(jià)都為5星
點(diǎn)擊星星觸發(fā)事件，獲取item和name.根據(jù)name判斷賦值
本來(lái)打算一個(gè)setData實(shí)現(xiàn)的，但是沒(méi)整出來(lái)，有整出來(lái)的朋友可以附下代碼

data: {
? ? total: 5,//總體評(píng)價(jià)
? ? service: 5,//服務(wù)態(tài)度
? ? quality: 5,//施工質(zhì)量
? ? repairtime: 5//維修時(shí)間
? },
? img_bind: function(event) {
? ? var id = event.currentTarget.dataset.item + 1;
? ? var variable = event.currentTarget.dataset.name;
? ? console.log(id)
? ? console.log(variable)
? ? if (variable == "total")
? ? this.setData({
? ? ? total: id,
? ? })
? ? else if (variable == "service")
? ? ? this.setData({
? ? ? ? service: id,
? ? ? })
? ? else if (variable == "quality")
? ? ? this.setData({
? ? ? ? quality: id,
? ? ? })
? ? else
? ? {
? ? ? this.setData({
? ? ? ? repairtime: id,
? ? ? })
? ? }
? },

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

您可能感興趣的文章: