首頁 > 微信小程式 > 小程式開發 > 微信小程式之實現五星評分的範例

微信小程式之實現五星評分的範例

黄舟
發布: 2017-09-13 09:11:28
原創
2436 人瀏覽過

這篇文章主要介紹了微信小程式五星評分的實現實例的相關資料,這裡提供實現實例幫助大家實現改功能,需要的朋友可以參考下

微信小程式五星評分

五星評分效果:


<view>
  <view class="zan-font-16 my-ib" bindtap="myStarChoose">
    <block wx:for="{{starMap}}">
      <text wx:if="{{star>=index+1}}" style="padding-right: .5em" class="zan-c-red" data-star="{{index+1}}">★</text>
      <text wx:if="{{star<index+1}}" style="padding-right: .5em" class="zan-c-gray-dark" data-star="{{index+1}}">☆</text>
    </block>
  </view>
  <!--★-->
  <text class="zan-c-gray-dark">{{starMap[star-1]}}</text>
</view>
登入後複製

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

這裡的my-ib只是將設定display為inline-block。


Page({
  data: {
    star: 0,
    starMap: [
      &#39;非常差&#39;,
      &#39;差&#39;,
      &#39;一般&#39;,
      &#39;好&#39;,
      &#39;非常好&#39;,
    ],
  },
  myStarChoose(e) {
    let star = parseInt(e.target.dataset.star) || 0;
    this.setData({
      star: star,
    });
  }
});
登入後複製

效果如圖:

#

以上是微信小程式之實現五星評分的範例的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板