WeChatアプレットはふるいを振る効果を実現

WeChatアプレットはふるいを振る効果を実現

この記事では、WeChatアプレットの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。

1. 効果図:

2.HTMLコード:

<!--pages/game/game.wxml-->

<view class="text">ふるい点の数は: {{total}}</view>
<view class="point1">
  <画像 src="{{top}}">
  </画像>
</ビュー>
<view class="point2">
  <画像 src="{{left}}"></画像>
  <画像 src="{{right}}">
  </画像>
</ビュー>
<button class='{{btn}}' bindtap='click'>{{texts}}</button>

3.jsコード:

データ: {
    上: "../images/images/1-point.png",
    合計: ''、
    左: "../images/images/2-point.png",
    右: "../images/images/3-point.png",
    btn: '.btnStart',
    テキスト:「シェイクして」
    フラグ: true、
    画像:[
      "../images/images/1-point.png",
      "../images/images/2-point.png",
      "../images/images/3-point.png",
      "../images/images/4-point.png",
      "../images/images/5-point.png",
      「../images/images/6-point.png」

    ]

  },

  /**
   * ライフサイクル機能 - ページの読み込みをリッスンする*/
 クリック:関数(){
   var self = this;
   if(this.data.flag){
    
     self.timer = setInterval(関数(){
       var one = Math.floor(Math.random() * 6);
       var two = Math.floor(Math.random() * 6);
       var three = Math.floor(Math.random() * 6);
        自己.setData({          
          上: self.data.img[one],
          左: self.data.img[2],
          右: self.data.img[three],
          合計:1+2+3+3、
          
        })
     },200)
     自己.setData({
       btn: ".btnEnd"、
       テキスト: 「停止」、
       フラグ:false、
     })
     
   } それ以外 {
     タイマー間隔をクリアします。

     自己.setData({
       btn: ".btnStart"、
       テキスト:「シェイクして」
       フラグ: true、


     })

   }
   
 },

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

以下もご興味があるかもしれません:
  • ふるい抽選を実施するミニプログラム

<<:  Linux での MySql centos7 のバイナリコンパイルとインストールに関するチュートリアル

>>:  MySQL 5.7.23 解凍バージョンのインストールチュートリアル(画像とテキスト付き)

推薦する

TypeScript における型保護の詳細な説明

目次概要型アサーション構文ではインスタンスオブ構文typeof構文要約する概要TypeScript ...

Alibaba Cloud ECS centos6.8 に MySql5.7 をインストールして設定するチュートリアル

Alibaba Cloud yum コマンドでのデフォルトの MySQL バージョンは 5.17**...

Angularが予期しない例外エラーを処理する方法の詳細な説明

前面に書かれたコードがどれだけ適切に記述されていても、すべての可能性のある例外を完全に処理することは...

MySQL遅延スレーブを導入するメリットのまとめ

序文MySQL のマスター/スレーブ レプリケーション関係は、厳密には「同期」または「マスター/スレ...

react-beautiful-dnd を使用してリスト間のドラッグ アンド ドロップを実装する

目次react-beautiful-dndを選ぶ理由基本的な使い方基本概念使い方使用中に発生した問題...

Linux のハードリンクとソフトリンクの原理と使用法の分析

Linux システムには、ファイル共有を解決するために使用できるリンク ファイルと呼ばれる種類のファ...

HTML 基本コントロール入門_PowerNode Java アカデミー

<input> タグ<input> タグはユーザー情報を収集するために使用さ...

CSSフローティングとフローティング解除について

フロートの定義要素を通常のドキュメント フローから外し、要素を左また​​は右に近づけます。親要素の端...

MySQL スケジュールされたデータベース バックアップ操作の例

この記事では、MySQL のスケジュールされたデータベース バックアップ操作の例について説明します。...

ウェブサイトのデザイン体験のための7つの異なるカラースキーム

ウェブサイト構築におけるカラーマッチングは非常に特殊であり、ウェブサイトのテーマ、感情、雰囲気などの...

Linux Samba サーバーの超詳細なインストールと構成 (問題解決付き)

目次Samba サーバーの紹介Samba サーバー コンポーネントSamba サーバー関連の設定ファ...

MySQL 接続例外とエラー 10061 の解決方法

MySQL は、スウェーデンの会社 MySQL AB によって開発されたリレーショナル データベース...

JavaScript を使用してページ要素のオフセットを取得/計算する方法

質問コントロールをクリックすると、コントロールの下にフローティング レイヤーが表示されます。通常の方...

Vueでドラッグ可能なコンポーネントを実装する方法

この記事では、Vueでドラッグ可能なコンポーネントとドラッグ可能なコンポーネントを実装する方法を参考...