小型マイクロチャネルプログラムテキストスクロールマーキー

データ：{ 
      テキスト：「予約時間は、例えば2時間未満の技術として、以前の予約をキャンセルする二時間を保存する必要がない場合はキャンセルと接触することができる」、
        marqueePace： 0.5、// スクロール速度 
        marqueeDistance：0、// 初期スクロール距離 
        marquee_margin：0 、
        サイズ： 28 、
        間隔： 20である// 間隔
  }、

onShow：関数（）{
         VAR = この;
         VARの長さ= that.data.text.length * that.data.size; // テキスト長
        VAR。windowWidth = wx.getSystemInfoSync（）windowWidth; // 画面幅
        // にconsole.log（長さ、windowWidth）; 
        that.setData（{ 
         長さ：長さ、
         windowWidth：windowWidth 
        }）; 
        that.scrolltxt（）; // 最初のワードは、右から消えた直後に表示される
}、
  
 scrolltxt：関数（ ）{
         VAR = この;
         VARの長さ= that.data.lengthを; // テキストスクロールの幅
        VARを windowWidth = that.data.windowWidth; // 画面幅
        IF（長さ> windowWidth）{
                VARの間隔=たsetInterval（関数（） {
                 VARmaxscrollwidth that.data.marquee_margin =長さ+; // 最大幅圧延、テキスト幅+間隔、テキストのそれらの圧延ラインを変更することができた後に、所望であればmarquee_margin 2行目はwindowWidthに等しい
                VAR crentleft = that.data.marqueeDistance ;
                 のiF（crentleft <maxscrollwidth）{ //は、最大幅までスクロールするか否かを判断
                     that.setData（{ 
                      marqueeDistance：crentleft + that.data.marqueePace 
                     }）
                } 他{
                      // はconsole.log（ "置換"）; 
                     that.setData（ { 
                      marqueeDistance： 0 // 直接再ローリング
                     }）; 
                     てclearInterval（間隔ザ）; 
                     that.scrolltxt（）; 
                } 
               }、that.data.interval）; 
        } 他{ 
              that.setData（{marquee_margin： "1000"}）; // プラスをスクロールせずに右へ一つだけピッチを示します大繰り返し表示防止
        } 
 }、

< ビュークラス= "pad_25" > 
    < ビュークラス= "dis_f ali_ct" > 
        < ビュー> < 画像SRC = "/画像/ laba_wode.png" クラス= "dis_b laba_img_w"  /> </ ビュー> 
        < ビュークラス= "clr_g flex1"  > 
            < スクロールビュー   > 
                 < ビュークラス= "scrolltxt clr_g" > 
                  < ビュークラス= "marquee_boxを" > 
                   <ビュークラス=「marquee_text」スタイル= "変換：移動X（ - {{marqueeDistance}} PX）" > 
                    < テキストクラス= "clr_g" > {{テキスト}} </ テキスト> 
                    < テキストスタイル= "マージン右：{{marquee_margin}} PXと、"   クラス= "clr_g" > </ テキスト> 
                    < テキストスタイル= "マージン右：{{marquee_margin}} PX;" クラス= "clr_g" > {{テキスト}} </ テキスト>     
                   </ ビュー> 
                  </ ビュー> 
                 </ 表示> 
            <
        > 

    </ ビュー> 
</ ビュー>

.scrolltxt { パディング：0 20rpx。背景：＃1 f8f8f8 ;} 
.marquee_box { 位置：相対。色：＃333 ; 高さ：90rpx。表示：ブロック ; オーバーフロー：隠された ;}  
.marquee_text { 空白：NOWRAP。位置：絶対 ; トップ：0 ; フォントサイズ：28rpx; 高さ：90rpx。行の高さ：90rpx ;}

効果