小程序前端实现文字横屏滚动动画

在网上看了很多代码实例感觉都比较麻烦,自己投机取巧使用了一个字符串的方法实现了文字横屏滚动的效果,下面直接上代码

//js页面
var textTimer;
Page({
  data: {
    text: "这里是需要展示的文字"
  },
  onLoad: function(options) {
    const that = this;
        if (that.data.length > 33) {//这里需要判断字符串的长度是否大于屏幕的宽度,看是否需要文字滚动
          setTimeout(function() {
            texTtimer = setInterval(function() {
              let txt = that.data.text
              let start = txt.substring(0, 1);//取该字符串的第一个字符
              let end = txt.substring(1);//取该字符串的从1之后的所有字符
              let text = end + start;//拼接新的字符串
              that.setData({
                text: text//更新字符串
              })
            }, 200)
          }, 1500)
        }
  },
  })

wxss页面
.noticeText{//文字展示框的class
  width: 620rpx;
  overflow: hidden;//超出宽度的部分字符串要隐藏
  margin-right: 20rpx;
  white-space: nowrap;//这个必须写,不然会换行
}

wxml页面
  <view class='noticeBox'>
    <view class='noticeText'>{{text}}</view>
  </view>

以上就是所有实现的代码,主要使用到的就是字符串的substring方法