ホームページ > WeChat アプレット > ミニプログラム開発 > 5つ星評価を獲得するためのWeChatミニプログラムの例

5つ星評価を獲得するためのWeChatミニプログラムの例

黄舟
リリース: 2017-09-13 09:11:28
オリジナル
2436 人が閲覧しました

この記事では、WeChat ミニ プログラムの 5 つ星評価の実装例に関する関連情報を主に紹介します。ここでは、修正された機能を実装するのに役立つ実装例を提供します。

WeChat ミニ プログラム 5 つ星評価。

5つ星の評価効果:


<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 は、表示をインラインブロックに設定するだけです。


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,
    });
  }
});
ログイン後にコピー

効果は写真の通りです:

以上が5つ星評価を獲得するためのWeChatミニプログラムの例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート