這篇文章給大家分享的是有關(guān)微信小程序中如何實(shí)現(xiàn)五星評(píng)分效果的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

目前創(chuàng)新互聯(lián)建站已為上千的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)頁(yè)空間、網(wǎng)站改版維護(hù)、企業(yè)網(wǎng)站設(shè)計(jì)、額敏網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶(hù)導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶(hù)和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。

五星級(jí)評(píng)分效果:

  
    
      =index+1}}" style="padding-right: .5em" class="zan-c-red" data-star="{{index+1}}">★
      ☆
    
  
  
  {{starMap[star-1]}}

這里的zan-font-16,zan-c-red,zan-c-gray-dark是ZanUI-WeApp的樣式。

這里的my-ib只是將設(shè)置display為inline-block。

Page({
  data: {
    star: 0,
    starMap: [
      '非常差',
      '差',
      '一般',
      '好',
      '非常好',
    ],
  },
  myStarChoose(e) {
    let star = parseInt(e.target.dataset.star) || 0;
    this.setData({
      star: star,
    });
  }
});

效果如圖：

感謝各位的閱讀！關(guān)于“微信小程序中如何實(shí)現(xiàn)五星評(píng)分效果”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！