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 パラメータ構成

推薦する

W3C チュートリアル (7): W3C XSL アクティビティ

スタイル シートは、ドキュメントの表示方法、発音方法、または入力方法を記述します。XSL 言語は、X...

Centos8でdockerがインストールできない問題の解決方法

問題 [root@zh ~]# [root@zh ~]# [root@zh ~]# yum -y d...

フォームの送信イベントが応答しない

1. 問題の説明<br />JS を使用してフォームの送信メソッドを呼び出してフォームを...

MySQL の繰り返し読み取りレベルでファントム読み取りを解決できますか?

導入データベース理論についてさらに学んでいくうちに、さまざまな分離レベルによって起こり得る問題につい...

CocosCreator で http と WebSocket を使用する方法

目次1. HTTPGET 2. HTTP POSTウェブソケット4. Egretのhttpとwebs...

JavaScript でプロパティハイジャックを実装する方法 defineProperty

目次序文記述子getとsetの詳細な説明オブジェクトの属性の乗っ取りオブジェクトのすべてのプロパティ...

IE8対応のボーダー半径処理方法

canisue (http://caniuse.com/#search=border-radius)...

ドキュメントの場所の比較

<br />2 年前に PPK が投稿した素晴らしいブログ記事では、contains()...

Dockerfile を使用して Java ランタイム環境のミラーを作成する方法

現在の環境は次のとおりです。セントロス7.5 docker-ce 18.06.1-ce 1. まずc...

Vueはタブ切り替えを実装します

この記事では、タブ切り替えを実装するためのVueの具体的なコードを例として紹介します。具体的な内容は...

Tomcat セキュリティ仕様 (Tomcat セキュリティ強化と仕様)

tomcat はオープンソースの Web サーバーです。Tomcat ベースの Web は実行効率...

Linux の非常に詳細な gcc アップグレード プロセス

目次序文1. 現在のgccバージョン2. gccをインストールする3.gmpのインストール4.MPF...

CSS3 で作成された背景グラデーションアニメーション効果

成果を達成する 実装コードhtml <h1 class="text-light&qu...

タブバーのいくつかの実装方法(推奨)

タブ: カテゴリ + 説明タグバー: カテゴリ => ユーザーに現在地と目的地を知らせる1. ...

背景画像にテキストを表示するためのCSS

効果: <div class="imgs"> <!-- 背景画...