微信小程式實現評價功能

2022-08-28 18:00:28

本文範例為大家分享了微信小程式實現評價的具體程式碼，供大家參考，具體內容如下

首先去圖示庫，找一個空心星圖片和一個實星圖片

先是效果圖

程式碼

wxml檔案

for迴圈5次，初始值是5星，data-name用於區別是那個評價的星星
src="{{item-total+1>0?’…/image/empty_stars.png’:’…/image/entity_stars.png’}}"
條件判斷，圖片判斷一個是空星，一個實星，根據自己圖片地址改變

<view class="view_page">
  <view class="content_cls">
    <view class="cross_column" style="margin-top: 50rpx;">
      <label>總體評價：</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>服務態度：</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>施工質量：</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>維修時間：</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">確認評價</button>
    </view>
  </view>
</view>

css樣式

如果需要實現我這種效果可以使用

/* 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;
}
/*報修評價內容樣式 */

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

最後就是js

先是初始化評價都為5星
點選星星觸發事件，獲取item和name.根據name判斷賦值
本來打算一個setData實現的，但是沒整出來，有整出來的朋友可以附下程式碼

data: {
    total: 5,//總體評價
    service: 5,//服務態度
    quality: 5,//施工質量
    repairtime: 5//維修時間
  },
  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,
      })
    }
  },

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援it145.com。

微信小程式實現評價功能

程式碼

熱門文章