この記事の例では、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 パラメータ構成
スタイル シートは、ドキュメントの表示方法、発音方法、または入力方法を記述します。XSL 言語は、X...
問題 [root@zh ~]# [root@zh ~]# [root@zh ~]# yum -y d...
1. 問題の説明<br />JS を使用してフォームの送信メソッドを呼び出してフォームを...
導入データベース理論についてさらに学んでいくうちに、さまざまな分離レベルによって起こり得る問題につい...
目次1. HTTPGET 2. HTTP POSTウェブソケット4. Egretのhttpとwebs...
目次序文記述子getとsetの詳細な説明オブジェクトの属性の乗っ取りオブジェクトのすべてのプロパティ...
canisue (http://caniuse.com/#search=border-radius)...
<br />2 年前に PPK が投稿した素晴らしいブログ記事では、contains()...
現在の環境は次のとおりです。セントロス7.5 docker-ce 18.06.1-ce 1. まずc...
この記事では、タブ切り替えを実装するためのVueの具体的なコードを例として紹介します。具体的な内容は...
tomcat はオープンソースの Web サーバーです。Tomcat ベースの Web は実行効率...
目次序文1. 現在のgccバージョン2. gccをインストールする3.gmpのインストール4.MPF...
成果を達成する 実装コードhtml <h1 class="text-light&qu...
タブ: カテゴリ + 説明タグバー: カテゴリ => ユーザーに現在地と目的地を知らせる1. ...
効果: <div class="imgs"> <!-- 背景画...