怎么用微信小程序實現評價功能

本篇內容主要講解“怎么用微信小程序實現評價功能”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“怎么用微信小程序實現評價功能”吧!

先是效果圖

代碼

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" >
      <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" >
      <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,
      })
    }
  },

到此，相信大家對“怎么用微信小程序實現評價功能”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！