WeChatアプレットがテキストスクロールを実装

WeChatアプレットがテキストスクロールを実装

この記事の例では、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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • WeChatアプレットのスクロールビューの非表示のスクロールバーの詳細な説明
  • WeChatアプレットのスクロールビューでスクロールの浸透を実装し、スクロールを防止する方法
  • WeChatアプレットのスクロールビューの水平スクロールの実際的な落とし穴とスクロールバーを非表示にする実装の詳細な説明
  • WeChatアプレット上部のスクロール可能なナビゲーション効果
  • WeChatアプレットのスクロールビューコンポーネントはスクロールアニメーションを実装します
  • WeChat アプレット - スクロールメッセージ通知のサンプルコード
  • WeChatアプレットのスクロールタブで左右のスライド切り替えを実現
  • WeChatアプレットが複数行テキストのスクロール効果を実現
  • WeChatアプレットは水平および垂直スクロールを実現
  • WeChatミニプログラムがシームレスなスクロールを実現

<<:  Windows Server 2012 でデスクトップ上の一般的なアイコンを表示または非表示にする方法

>>:  InnoDB エンジンのパフォーマンスを最適化するための my.cnf パラメータ構成

推薦する

WeChatアプレットが複数行テキストのスクロール効果を実現

この記事の例では、WeChatアプレットで複数行のテキストスクロールを実装するための具体的なコードを...

MySQL5.7+ MySQL Workbenchのインストールと設定方法のグラフィックチュートリアル(MAC)

この記事では、主にMACオペレーティングシステムでのMySQL5.7とMySQLWorkbenchの...

HTML フォームタグチュートリアル (4):

ここで、次のような項目をフォームに追加したいとします: 現在いる都市を参照します。ここで私たちが話し...

Linux シェル環境での Zabbix API の使用

Linux シェル環境で直接呼び出すことができます。公式 Web サイトによると、Zabbix のデ...

960 グリッドシステムの基本原理と使用法

もちろん、CSS はフレームワークを必要とするほど高度ではないと考えて、反対の意見を持つ人もたくさん...

エコー後に要素編集フォームel-radioが選択できない問題を解決します

目次序文質問オンラインソリューション序文この記事の内容は私がこの業界に入ったときのメモを元にしている...

Dockerモードで起動したTomcatのホームページにアクセスすると404エラーが発生する

シナリオ: docker で tomcat を起動すると (Alibaba Cloud からダウンロ...

携帯電話番号の真ん中の4桁を隠すMySQL SQL文の方法

最初のクエリ テーブル構造 (sys_users): sys_users から * を選択します。最...

Vueコンポーネントの再利用と拡張の詳細な説明

目次概要延長は必要ですか?スロットJavaScript ユーティリティ関数拡張コンポーネントの複数の...

CSS フレックスベースのテキストオーバーフロー問題の解決方法

重要でないflex-basisテキストオーバーフローに省略記号を追加するという小さな機能に多くの問題...

Vue3はJingdong製品詳細ページの虫眼鏡効果コンポーネントをカプセル化します

この記事では、Jingdong製品詳細ページの虫眼鏡効果コンポーネントに似たvue3カプセル化の具体...

CSS3 で複数のカスタムフォントを導入する

今日、HTML に問題を発見しました。多くのデフォルト フォントが提供されていますが、「Bold」、...

CSS3 すりガラス効果

すりガラス効果がうまく表現されていれば、ページが非常に鮮やかで立体的に見えるようになります。写真に直...

uniAppエディタWeChatスライド問題について

ユニアプリアプレットはWeChatでも同様のドロップダウン問題を抱えることになる解決策は、app.v...

HTML テーブルの境界線を設定する際のヒント

HTML を初めて使用する多くの人にとって、テーブル <table> は最もよく使用され...