この記事では、参考までに、テキストループスクロールを実現するアプレットの具体的なコードを例を挙げて紹介します。具体的な内容は次のとおりです。 問題の解決方法: 1. テキストループ再生効果 2. アプレットを終了し、隠れた背景アニメーションを停止します(解決済み) 効果: コード: wxml <view animation="{{animation}}" class="animation"> 919 テスト使用 - 小さなプログラムのループ再生~~~ </ビュー> wxss 。アニメーション{ 幅: 100%; 変換: translateX(100%); 位置: 固定; 上位: 45% フォントサイズ: 16px; フォントの太さ: 太字; } 最終js /** * ライフサイクル関数 - ページの初期レンダリングの完了を待機します*/ onReady: 関数 () { this.bindAnimation(); }, バインドアニメーション(){ var this_ = これ; var アニメーション = wx.createAnimation({ 期間: 5000、 タイミング関数: 'linear'、 変換元:"100% 0 0" }) アニメーション.translateX('-100%').step(); this.setData({ アニメーション:アニメーション.エクスポート(), }) //ループアニメーションを設定します this.animation = animation; setInterval(関数(){ // 2 番目のアニメーション テキスト位置の初期化 this.Animation2(); // スクロールアニメーションを遅らせる(効果はより良くなります) setTimeout(関数(){ this.animation.translateX('-100%').step(); this.setData({ アニメーション: animation.export(), }) }.bind(これ),200); }.bind(これ),5000); }, /** * 2番目のアニメーションテキストの位置を初期化します*/ アニメーション2(){ var this_ = これ; var animation2 = wx.createAnimation({ 期間: 0, タイミング関数: 'linear'、 変換元:"100% 0 0" }) アニメーション2.translateX('100%').step(); this_.setData({ アニメーション:animation2.export(), }) }, /** * ミニプログラムの終了とバックグラウンドアニメーションの停止の問題を解決します */ onHide: 関数 () { // ミニプログラムの終了とバックグラウンド アニメーションの停止の問題を解決します // アニメーション メソッドを再度トリガーします this.bindAnimation(); }, 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: CentOS 7.6 Telnetサービス構築プロセス(Opensshアップグレードバトル第一弾のバックアップトランスポートライン構築)
>>: MySQLの実行原理、論理階層化、データベース処理エンジンの変更について詳しく説明します
パスワード強度検証について: [root@mysql mysql]# mysql -uroot -p...
forループ基本的な構文形式: for(変数の初期化; 条件式; 演算式){ループ本体ステートメント...
HTML は Hypertext Markup Language の略です。現在、ほとんどの Web...
インターネット上の this.$set の説明はわかりにくいと感じます。単一データ、オブジェクト、配...
mptemp は安全な方法で一時ファイルまたはディレクトリを作成します。このコマンドの適用範囲: R...
Vue ユーザーとして、React を拡張する時が来ました。antd の導入、less と rout...
MySQL sql_modeの適切な設定sql_mode は見落とされやすい変数です。デフォルト値は...
注: MySQL5.7 で root パスワードをクラックするには、パスワード認証をスキップしてデー...
データベースのクエリ `学生`から*を選択 クエリ結果id名前誕生日1張三1970-10-01 2李...
序文この記事は主に、日常の Web ページ制作で遭遇する問題解決スキルの一部をまとめ、皆さんの参考と...
プロジェクトシナリオ:ページ表示には <ul> タグがあります。リストデータを動的に表示...
この記事では、パスワードボックスの検証情報を実装するためのJavaScriptの具体的なコードを例と...
コードをコピーコードは次のとおりです。 IE6 と FF の違い: background:orang...
序文信じてください。この記事の 7️⃣ ステップを覚えておけば、JS の this リファレンスを完...
目次序文🍹準備🍲vue3 の使い方🍖 実装要約する序文最近、私の最初の公式 vue3 + ts プロ...