Small micro-channel program text scrolling marquee

Data: { 
      text: "If the reservation time is not required to store two hours earlier cancel the reservation, such as less than two hours technician may contact a cancellation" , 
        marqueePace: 0.5, // scroll speed 
        marqueeDistance: 0, // initial scrolling distance 
        marquee_margin: 0 , 
        size: 28 , 
        interval The: 20 is // interval 
  }, 

onShow: function () {
         var that = the this ;
         var length = that.data.text.length * that.data.size; // text length 
        var . windowWidth = wx.getSystemInfoSync () windowWidth; // screen width
        // the console.log (length, windowWidth); 
        that.setData ({ 
         length: length, 
         windowWidth: windowWidth 
        }); 
        that.scrolltxt (); // immediately after the first word disappears from the right appears 
}, 
  
 scrolltxt: function ( ) {
         var that = the this ;
         var length = that.data.length; // width of scrolling text 
        var windowWidth = that.data.windowWidth; // screen width 
        IF (length> windowWidth) {
                var interval the = the setInterval ( function () {
                 var= length + that.data.marquee_margin maxscrollwidth; // rolling maximum width, text width + spacing, if desired after their rolling line of text can be modified marquee_margin second line is equal to windowWidth 
                var crentleft = that.data.marqueeDistance ;
                 iF (crentleft <maxscrollwidth) { // determines whether to scroll to the maximum width 
                     that.setData ({ 
                      marqueeDistance: crentleft + that.data.marqueePace 
                     }) 
                } the else {
                      // the console.log ( "replacement"); 
                     that.setData ( { 
                      marqueeDistance: 0 // direct re-rolling
                     }); 
                     The clearInterval (interval The); 
                     that.scrolltxt (); 
                } 
               }, that.data.interval); 
        } the else { 
              that.setData ({marquee_margin: "1000"}); // show only one pitch to the right without scrolling plus large prevent repeatedly displayed 
        } 
 },

<view class="pad_25">
    <view class=" dis_f ali_ct">
        <view><image src="/images/laba_wode.png" class="dis_b laba_img_w" /></view>
        <view class="clr_g flex1" >
            <scroll-view  >
                 <view class="scrolltxt clr_g">
                  <view class="marquee_box">
                   <view class="marquee_text" style="transform: translateX(-{{marqueeDistance}}px)">
                    <text class="clr_g">{{text}}</text>
                    <text style="margin-right:{{marquee_margin}}px;"  class="clr_g"></text>
                    <text style="margin-right:{{marquee_margin}}px;" class="clr_g">{{text}}</text>    
                   </view>
                  </view>
                 </view>
            </scroll-view>
        </view>

    </view>
</view>

.scrolltxt{padding:0 20rpx;background:#f8f8f8;}
.marquee_box {position:relative;color:#333;height:90rpx;display:block;overflow:hidden;} 
.marquee_text {white-space: nowrap;position:absolute;top:0;font-size:28rpx;height:90rpx;line-height:90rpx;}

effect