この記事の例では、WeChatアプレットでテキストスクロールを実装するための具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。 wxml: <view>表示後、再度表示します:</view> <view class="example"> <ビュークラス="ボックス"> <view class="text" style="{{orientation}}:{{marqueeDistance}}px;フォントサイズ: {{size}}px;"> {{文章}} </ビュー> </ビュー> </ビュー> <view>白い枠線が表示されたら、次のように表示されます:</view> <view class="example"> <ビュークラス="ボックス"> <view class="text" style="{{orientation}}:{{marqueeDistance2}}px;フォントサイズ: {{size}}px;"> <テキスト>{{テキスト}}</テキスト> <text wx:if="{{marquee2copy_status}}" style="margin-left:{{marquee2_margin}}px;">{{text}}</text> </ビュー> </ビュー> </ビュー> 色: 。例 { 表示: ブロック; 幅: 100%; 高さ: 100rpx; } 。箱 { 幅: 100%; 位置: 相対的; } 。文章 { 空白: ラップなし; 位置: 絶対; 上: 0; } js: ページ({ データ: { テキスト: 'スクロールテキスト 1234567890abcdefghijklmnopqrstuvmxyz', marqueePace: 1, //スクロール速度 marqueeDistance: 0, //初期スクロール距離 marqueeDistance2: 0, marquee2copy_status: 偽、 マーキー2_マージン: 60, サイズ: 14, orientation: 'left', //スクロール方向 interval: 20 //時間間隔}, onShow: 関数() { // ページ表示 var vm = this; var length = vm.data.text.length * vm.data.size; //テキストの長さ var windowWidth = wx.getSystemInfoSync().windowWidth; //画面の幅 vm.setData({ 長さ: 長さ、 ウィンドウ幅: ウィンドウ幅、 marquee2_margin: length < windowWidth ? windowWidth - length : vm.data.marquee2_margin //テキストの長さが画面の長さより短い場合は、パディングを追加する必要があります}); vm.run1(); // 単語の水平行をスクロールした後、元の方向にスクロールします vm.run2(); // 最初の単語が消えて、すぐに右から表示されます }, 実行1: 関数() { var vm = this; var 間隔 = setInterval(関数() { (-vm.data.marqueeDistance < vm.data.length) の場合 { vm.setData({ マーキー距離: vm.data.marqueeDistance - vm.data.marqueePace、 }); } それ以外 { clearInterval(間隔); vm.setData({ マーキー距離: vm.data.windowWidth }); vm.run1(); } }, vm.data.interval); }, 実行2: 関数() { var vm = this; var 間隔 = setInterval(関数() { (-vm.data.marqueeDistance2 < vm.data.length) の場合 { // テキストがmarquee2_margin=30pxの白い端までスクロールしたら、vm.setData({ マーキー距離2: vm.data.マーキー距離2 - vm.data.マーキーペース、 marquee2copy_status: vm.data.length + vm.data.marqueeDistance2 <= vm.data.windowWidth + vm.data.marquee2_margin、 }); } それ以外 { if (-vm.data.marqueeDistance2 >= vm.data.marquee2_margin) { // 2番目のテキストが左端までスクロールするとvm.setData({ marqueeDistance2: vm.data.marquee2_margin // 直接再ロール }); clearInterval(間隔); vm.run2(); } それ以外 { clearInterval(間隔); vm.setData({ マーキー距離2: -vm.data.windowWidth }); vm.run2(); } } }, vm.data.interval); } }) 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Windows Server 2012 でデスクトップ上の一般的なアイコンを表示または非表示にする方法
>>: InnoDB エンジンのパフォーマンスを最適化するための my.cnf パラメータ構成
この記事の例では、WeChatアプレットで複数行のテキストスクロールを実装するための具体的なコードを...
この記事では、主にMACオペレーティングシステムでのMySQL5.7とMySQLWorkbenchの...
ここで、次のような項目をフォームに追加したいとします: 現在いる都市を参照します。ここで私たちが話し...
Linux シェル環境で直接呼び出すことができます。公式 Web サイトによると、Zabbix のデ...
もちろん、CSS はフレームワークを必要とするほど高度ではないと考えて、反対の意見を持つ人もたくさん...
目次序文質問オンラインソリューション序文この記事の内容は私がこの業界に入ったときのメモを元にしている...
シナリオ: docker で tomcat を起動すると (Alibaba Cloud からダウンロ...
最初のクエリ テーブル構造 (sys_users): sys_users から * を選択します。最...
目次概要延長は必要ですか?スロットJavaScript ユーティリティ関数拡張コンポーネントの複数の...
重要でないflex-basisテキストオーバーフローに省略記号を追加するという小さな機能に多くの問題...
この記事では、Jingdong製品詳細ページの虫眼鏡効果コンポーネントに似たvue3カプセル化の具体...
今日、HTML に問題を発見しました。多くのデフォルト フォントが提供されていますが、「Bold」、...
すりガラス効果がうまく表現されていれば、ページが非常に鮮やかで立体的に見えるようになります。写真に直...
ユニアプリアプレットはWeChatでも同様のドロップダウン問題を抱えることになる解決策は、app.v...
HTML を初めて使用する多くの人にとって、テーブル <table> は最もよく使用され...