小程序中实现滚动字幕

原理：

利用css3的translate,动态修改这个属性值。

.ttt{
  color:#fff;
  white-space: nowrap;
  font-size: 14px;
  height: 80rpx;
  line-height: 80rpx;
}

 

<scroll-view>
    <view class="ttt" style="transform: translateX(-{{distance}}px)">
      <text style="margin-right:{{space}}px;"></text>
      <text id="mjltest">{{text}}</text>
      <text style="margin-right:{{space}}px;"></text>
      <text>{{text}}</text>
  </view>
</scroll-view>

　　

Page({
  data: {
    text: "滚动字幕~~~~",
    step: 1, //滚动速度
    distance: 0, //初始滚动距离
    space: 30,
    interval: 20 // 时间间隔
  },
  onShow: function() {
    var that = this;
    var query = wx.createSelectorQuery();
    //选择id
    query.select('#mjltest').boundingClientRect()
    query.exec(function(res) {
      var length = res[0].width;
      var windowWidth = wx.getSystemInfoSync().windowWidth; // 屏幕宽度

      that.setData({
        length: length,
        windowWidth: windowWidth,
        space:windowWidth
      });
      that.scrollling(); // 第一个字消失后立即从右边出现
    });
  },
  scrollling: function() {
    var that = this;
    var length = that.data.length; //滚动文字的宽度
    var windowWidth = that.data.windowWidth; //屏幕宽度
    var interval = setInterval(function() {
      var maxscrollwidth = length + that.data.space;
      var left = that.data.distance;
      if (left < maxscrollwidth) { //判断是否滚动到最大宽度
        that.setData({
          distance: left + that.data.step
        })
      } else {
        that.setData({
          distance: 0 // 直接重新滚动
        });
        clearInterval(interval);
        that.scrollling();
      }
    }, that.data.interval);
  }
})