この記事では、参考までに、テキストループスクロールを実現するアプレットの具体的なコードを例を挙げて紹介します。具体的な内容は次のとおりです。 問題の解決方法: 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の実行原理、論理階層化、データベース処理エンジンの変更について詳しく説明します
コード:コードをコピーコードは次のとおりです。 <!DOCTYPE html PUBLIC &...
DockerデーモンソケットDocker デーモンは、 unix 、 tcp 、 fdの 3 種類の...
目次ミックスインの実装フック関数のマージプロジェクト実践伸ばす要約するVue は mixins AP...
目次原因:以下を実行します: 1. コンストラクター2.レンダリング機能3.bind関数とarrow...
この記事では、VMware 12でのUbuntu 16.04イメージのインストールチュートリアルを参...
この記事では、参考までに、虫眼鏡のJavaScriptオブジェクト指向実装の具体的なコードを紹介しま...
1. tomcat とは誰ですか? 2. Tomcat は何ができますか? Tomcat は Web...
1. Dockerネットワークモードdocker run が Docker コンテナを作成するときに...
目次序文仮想リストとは何ですか?デモ効果準備スクリーンの高さとボックスの高さ最適化要約する序文人気の...
@vue+echarts は中国地図のフロー効果を実現します#レンダリングを見てみましょう手順:コ...
目次1. 左端接頭辞原則2. 表に戻る3. インデックスプッシュダウン序文:インデックス プッシュダ...
目次DockerコンテナのエクスポートDockerコンテナのインポートこの記事では主に、コンテナ...
1. まずcenterosに付属のJDKをアンインストールします rpm-qa|grepopenjd...
目次キャッシュキャッシュ位置の分類キャッシュ設定ヘッダーNodeは静的ファイルキャッシュを実装する強...
概要zabbix バージョン 5.0 以降では、zabbix-agent2 という新しい機能が追加さ...