WeChatミニプログラムが星評価を実装

この記事では、WeChatアプレットで星評価を実装するための具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。

最初の方法:

WXML コード:

<表示>
    星評価</view>
 
<表示>
 
    <block class="brightStars">
        <画像 data-index='0' data-no="{{item}}" wx:for="{{starsBox}}" bindtap="changePic" wx:key="index" src="{{flag[0]>=item? '../img/starFull.png' : '../img/star.png'}}"></画像>
    </ブロック>
    <view class="texts">{{starttext[0]}}</view>
</ビュー>

JSコード:

ページ（{
    データ： {
        フラグ: [0, 0, 0],
        開始テキスト: ['', '', '', ],
        星ボックス: [1, 2, 3, 4, 5]
    },
 
    changePic: 関数 (e) {
        var インデックス = e.currentTarget.dataset.index;
        console.log(インデックス、'-');
        var num = e.currentTarget.dataset.no;
        console.log(数値);
        var a = 'フラグ[' + インデックス + ']';
        コンソールにログ出力します。
        var b = 'starttext[' + インデックス + ']';
        コンソールログ(b);
        var that = this;
        数値 == 1 の場合
            that.setData({
                [a]: 1,
                [b]：「非常に不満」
            });
        } そうでなければ (num == 2) {
            that.setData({
                [a]: 2,
                [b]：「不満」
            });
        } そうでなければ (num == 3) {
            that.setData({
                [a]: 3,
                [b]: 「一般」
            });
        } そうでなければ (num == 4) {
            that.setData({
                [a]: 4,
                [b]：「満足」
            });
        } それ以外の場合 (num == 5) {
            that.setData({
                [a]: 5,
                [b]: 「非常に満足」
            });
        }
    },
 
})

WXSSコード:

。容器{
    ディスプレイ: フレックス;
    flex-direction: 行;
    パディング: 0;
    flex-wrap: nowrap;
    
}
 
画像{
    幅: 50px;
    高さ: 50px;
}

2番目の方法:

WXML コンテンツ:

<view>星評価</view>
 
<block wx:for="{{starYesNum}}" wx:key="index">
  <image bindtap="selectStar" id='{{index+1}}' data-in='selectStarYes' src='../../static/img/starY.png'></image>
</ブロック>
<block wx:for="{{starNoNum}}" wx:key="index">
  <image bindtap='selectStar' id='{{index+1}}' data-in='selectStarNo' src='../../static/img/starN.png'></image>
</ブロック>
<view>{{starYesNum}} 個の星</view>

最初のブロックタグには明るい星の付いたボックスが含まれています。 2 番目のブロックタグには明るい星のないボックスが含まれています。

星の評価は明るい星の数と暗い星の数を変えることによって達成されます

JSコード:

ページ（{
  データ： {
    starYesNum:0, //点灯している星の数 starNoNum:5, //点灯していない星の数},
 
  セレクトスター:function(e){
    console.log(e.target.id);
    console.log(e.currentTarget.dataset.in);
 
    //クリックした星が明るい星か暗い星かを判断して設定します if(e.currentTarget.dataset.in == 'selectStarNo'){
      this.setData({
        starYesNum: 数値(e.target.id) + 数値(this.data.starYesNum)、 
        starNoNum:5-Number(e.target.id) - Number(this.data.starYesNum)
      })
    }それ以外{
      this.setData({
        starYesNum:数値(e.target.id )、
        スターNoNum:番号(5-e.target.id)
      })
    }
  },
})

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: