WeChatアプレットで弾幕効果を実現

現在、オンラインには多くのデモがありますが、必要なものを見つけるのは簡単ではありません。今日は私が作成した弾幕関数を共有したいと思います。

まずレンダリングしてみましょう:

wxmlコードは次のとおりです:

wxssコードは次のとおりです:

りー

このような基本的なスタイルはすべて実装されています。次に、弾幕上の単語を処理する必要があります。

テキストは右から左に移動します。テキストの上部の位置はランダムで、左側の位置は画面の幅になります。移動時は

タイマーを使用して処理されます。

また、フォントの色はランダムに表示されます。これらの関数はすべて js を使用して処理されます。

jsコードは次のとおりです。

だって私はこれは小さなプログラムなので、いくつかのステートメントの使用法についてはよくわかりません。そこで、いくつかの問題が発生しました:

1. js で wxml 制御情報を取得します。

js:

りー

wxml:

結果: オブジェクトが返されましたコンソールで返される型はjson形式のデータのようです。

オブジェクト {type: "change"、timeStamp: 2766、target: Object、currentTarget: Object、detail: Object}

2. 弾幕を実装する場合、起動ボタンをクリックして入力ボックスの情報を取得します。

ここでは、入力ボックスがフォーカスを失ったときに、データを js のデータ クラスにコピーし、クリックして起動したときにデータ クラスの値を取得します。

3. 最大の問題は、テキストを実行する方法です。ミニプログラムは jQuery をサポートしていないため、js バカの私は少し無力です。

テキストの移動に関する私のアイデアは次のとおりです:

まず、弾幕を開くときにタイマーを定義し、弾幕を閉じるときにタイマーをオフにします。テキストの移動スタイルを配列に格納しているので、残りは決まります。テキストを移動するには、左側のサイズを変更するだけです。そこで、for ループを使用して、タイマーの実行中に弾幕テキスト スタイルのサイズを left: xxx px; に変更します。

以上がWeChatアプレットで弾幕効果を実現の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。