小程序-小程序跑马灯效果

在使用了支付宝小程序官方给出的notice组件，发现最终的跑马灯效果并没有跑起来，如实自己写了一个，代码如下:

.js

/** 
 跑马灯
*/
const MarqueeModel = {
  runLoop: 'runLoop', //文字中间固定margin
  runSingle: 'runSingle', //当第一条完全走完再跑第二遍
};

Component({
  mixins: [],
  data: {
    direction: 'left',//从右向左滚动
    interval: 20, // 定时器执行时间间隔
    marqueeSpeed: 1,//滚动速度
    marqueeOffsetX: 0,//偏移量
    marqueeCopy_status: false,
    marqueeCopy_margin: 60,
  },

  props: {
    model: MarqueeModel.runLoop,
    showIcon: true, //是否显示小喇叭
    text: '这是一段跑马灯测试文字',
  },
  didMount() {
    var that = this;
    var query = dd.createSelectorQuery();
    query.select('.content').boundingClientRect();
    query.exec(function(res) {
      that.initializedProperty(res[0].width);
    });
  },
  didUpdate() {},
  didUnmount() {},
  methods: {
    initializedProperty(length) {
      this.marqueeWidth = 315;// 跑马灯的实际宽度
      this.length = length;
      this.setData({
        marqueeCopy_margin: this.length < this.marqueeWidth ? this.marqueeWidth - this.length : this.data.marqueeCopy_margin//当文字长度小于屏幕长度时，需要增加补白
      });
      if (this.props.model == MarqueeModel.runSingle) {
        this.runSingle();// 水平一行字滚动完了再按照原来的方向滚动
      } else {
        this.runLoop();// 第一个字消失后立即从右边出现
      }
    },

    runLoop() {
      var that = this;
      var interval = setInterval(function () {
        if (-that.data.marqueeOffsetX < that.length) {//正常显示label的状态
          // 如果文字滚动到出现marquee2_margin=30px的白边，就接着显示
          that.setData({
            marqueeOffsetX: that.data.marqueeOffsetX - that.data.marqueeSpeed,
            marqueeCopy_status: that.length + that.data.marqueeOffsetX <= that.marqueeWidth - that.data.marqueeCopy_margin,
          });
        } else {
          that.setData({
            marqueeOffsetX: that.data.marqueeCopy_margin
          });
          clearInterval(interval);
          that.runLoop();
        }
      }, that.data.interval);
    },

    runSingle() {
      var that = this;
      var interval = setInterval(function () {
        if (-that.data.marqueeOffsetX < that.length) {
          that.setData({
            marqueeOffsetX: that.data.marqueeOffsetX - that.data.marqueeSpeed,
          });
        } else {
          clearInterval(interval);
          that.setData({
            marqueeOffsetX: that.marqueeWidth
          });
          that.runSingle();
        }
      }, that.data.interval);
    },
  },
});

.acss

.marquee {
  display: block;
  width: 100vw;
  height: 88rpx;
  background-color: #ECECEC;
  display: flex;
  align-items: center;
  justify-content: center;
}

.notice-icon {
  width: 40rpx;
  height: 36rpx;
  margin-left: 20rpx;
  margin-right: 20rpx;
}

.marquee_container {
  width: 100vw;
  height: 88rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.marquee_box_icon {
  width: 630rpx;
}

.marquee_box_none {
  width: 690rpx;
  margin-left: 30rpx;
}

.marquee_label_container {
  height: 88rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
  overflow: hidden;
}


.marquee_text {
  white-space: nowrap;
  position: absolute;
  font-size: 28rpx;
}

.axml

<view a:if="{{model=='runSingle'}}" class="marquee">
  <scroll-view class="marquee_container">
    <image a:if="{{showIcon}}" class="notice-icon" mode="aspectFit" src="/images/notice.png"/>
    <view class="marquee_label_container {{showIcon ? 'marquee_box_icon' : 'marquee_box_none'}}">
      <view class="marquee_text" style="{{direction}}:{{marqueeOffsetX}}px;">
        <text class='content'>{{text}}</text>
      </view>
    </view>
  </scroll-view>
</view>
<view a:else class="marquee">
  <scroll-view class="marquee_container">
    <image a:if="{{showIcon}}" class="notice-icon" mode="aspectFit" src="/images/notice.png"/>
    <view class="marquee_label_container {{showIcon ? 'marquee_box_icon' : 'marquee_box_none'}}">
      <view class="marquee_text" style="{{direction}}:{{marqueeOffsetX}}px;">
        <text class='content'>{{text}}</text>
        <text a:if="{{marqueeCopy_status}}" style="margin-left:{{marqueeCopy_margin}}px;">{{text}}</text>
      </view>
    </view>
  </scroll-view>
</view>

调用方式

{
//在.json中引入组件
  "component": true,
  "usingComponents": {
    "marquee": "/components/marquee/marquee"
  }
}

//在axml中调用组件
<marquee showIcon="{{true}}" model="runLoop" text="输入你想要的跑马灯内容"/>