在使用了支付寶小程序官方給出的notice組件，發(fā)現(xiàn)最終的跑馬燈效果并沒(méi)有跑起來(lái)，如實(shí)自己寫了一個(gè)旱幼，代碼如下:

.js

/** 
 跑馬燈
*/
const MarqueeModel = {
  runLoop: 'runLoop', //文字中間固定margin
  runSingle: 'runSingle', //當(dāng)?shù)谝粭l完全走完再跑第二遍
};

Component({
  mixins: [],
  data: {
    direction: 'left',//從右向左滾動(dòng)
    interval: 20, // 定時(shí)器執(zhí)行時(shí)間間隔
    marqueeSpeed: 1,//滾動(dòng)速度
    marqueeOffsetX: 0,//偏移量
    marqueeCopy_status: false,
    marqueeCopy_margin: 60,
  },

  props: {
    model: MarqueeModel.runLoop,
    showIcon: true, //是否顯示小喇叭
    text: '這是一段跑馬燈測(cè)試文字',
  },
  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;// 跑馬燈的實(shí)際寬度
      this.length = length;
      this.setData({
        marqueeCopy_margin: this.length < this.marqueeWidth ? this.marqueeWidth - this.length : this.data.marqueeCopy_margin//當(dāng)文字長(zhǎng)度小于屏幕長(zhǎng)度時(shí)，需要增加補(bǔ)白
      });
      if (this.props.model == MarqueeModel.runSingle) {
        this.runSingle();// 水平一行字滾動(dòng)完了再按照原來(lái)的方向滾動(dòng)
      } else {
        this.runLoop();// 第一個(gè)字消失后立即從右邊出現(xiàn)
      }
    },

    runLoop() {
      var that = this;
      var interval = setInterval(function () {
        if (-that.data.marqueeOffsetX < that.length) {//正常顯示label的狀態(tài)
          // 如果文字滾動(dòng)到出現(xiàn)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>

調(diào)用方式

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

//在axml中調(diào)用組件
<marquee showIcon="{{true}}" model="runLoop" text="輸入你想要的跑馬燈內(nèi)容"/>