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

<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;
}

ページ（{


 データ： {
 テキスト: 'スクロールテキスト 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);
 }


})