微信小程序实现跑马灯效果(适用场景: 横幅广告,纵向广告等)

Love The Way You Lie 2022-12-23 00:54 769阅读 0赞

.warm-prompt {
      background-color: #FFFFFF;
      height: 82rpx;
      margin: 0 20rpx;
      border-radius: 10rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    
    .text {
      color: #4D4D4D;
      white-space: nowrap;
      position: absolute;
      font-size: 28rpx;
    }

Page({
        data: {
            interval: null,
            pace: 1.2, //滚动速度
            interval: 20, //时间间隔
            size: 24, //字体大小in px
            length: 0, //字体宽度
            offsetLeft: 0, //
            windowWidth: 0,
    
        text: "公告  测试测试测试测试测试测试测试测试测试测试测试测试测试",
        },
        //根据viewId查询view的宽度
      queryViewWidth: function (viewId) {
        //创建节点选择器
        return new Promise(function (resolve) {
          var query = wx.createSelectorQuery();
          var that = this;
          query.select('.' + viewId).boundingClientRect(function (rect) {
            resolve(rect.width);
          }).exec();
        });
      },
      //执行跑马灯动画
      excuseAnimation: function () {
        var that = this;
        if (that.data.length > that.data.windowWidth) {
          //设置循环
          let interval = setInterval(function () {
            if (that.data.offsetLeft <= 0) {
              if (that.data.offsetLeft >= -that.data.length) {
                that.setData({
                  offsetLeft: that.data.offsetLeft - that.data.pace,
                })
              } else {
                that.setData({
                  offsetLeft: that.data.windowWidth,
                })
              }
            } else {
              that.setData({
                offsetLeft: that.data.offsetLeft - that.data.pace,
              })
            }
          }, that.data.interval);
        }
      },
      //停止跑马灯
      stopMarquee: function () {
        var that = this;
        //清除旧的定时器
        if (that.data != null) {
          clearInterval(that.interval);
        }
      },
      //开始跑马灯
      startMarquee: function () {
        var that = this;
        that.stopMarquee();
        //初始化数据
        that.data.windowWidth = wx.getSystemInfoSync().windowWidth;
        that.queryViewWidth('text').then(function (resolve) {
          that.data.length = resolve;
          console.log(that.data.length + "/" + that.data.windowWidth);
          that.excuseAnimation();
        });
      },
      onShow: {
          this.startMarquee()
      }
    })

以上就是所有代码,可以尝试一下