微信小程序上下滚动

小程序文字上下滚动，受到跑马灯效果启发，如果有更好的想法可以留言。

<scroll-view scroll-y class="index_scroll">

          <view class="classname" style="margin-top:{{marqueeDistance}}px;">
              <view class="index_scroll_list">
                <view class="index_list_text">

                  <text>11111111111111111</text>

  <text>11111111111111111</text> 

  <text>11111111111111111</text>              

              </view>
            </view>
            </view>

</scroll-view>

//js

data:{
    marqueePace: 2,//滚动速度
    marqueeDistance: 30,//初始滚动距离
    marqueeDistance2: 0,
    size: 14,
    interval: 100 // 时间间隔
  },

var length = 200;//长度
        var windowWidth = 380;// 屏幕长度
        that.setData({
          length: length,
          windowWidth: windowWidth,
          marquee2_margin: length < windowWidth ? windowWidth - length : that.data.marquee2_margin//当文字长度小于屏幕长度时，需要增加补白
        })

that.run1();// 滚动

run1: function () {


    var vm = this;


    var interval = setInterval(function () {




      if (-vm.data.marqueeDistance < vm.data.length) {




        vm.setData({


          marqueeDistance: vm.data.marqueeDistance - vm.data.marqueePace,


        });


      } else {


        clearInterval(interval);


        vm.setData({


          marqueeDistance: 30


        });


        vm.run1();


      }


    }, vm.data.interval);


  }