項目中最近又個業務，要寫一個自動滾動的組件，本想找一個現成的組件，但是找不到，然后就開始造輪子了

<!--
  組件名 Notice  通知

  屬性：
    data： String  文字內容
    url：String 要跳轉到哪個頁面

-->
<template>
  <div class="notice">
  <!-- 左側圖片 -->
    <image class="notice-icon" :src="notice"></image>
    <scroller
            ref="scroller"
            class="notice-left"
            scroll-direction="horizontal"
            :offset-accuracy="1"
            :scrollToBegin="true"
            :show-scrollbar="false"
            @scroll="handleScroll"
    >
      <text ref="scrollStart"></text>
      <text ref="scrollText" id="scrolltext" class="notice-text">{{ data.replace(/[\n\r]/g,' ') }}</text>
    </scroller>
    <!-- 滾動區域遮罩層，使用scroller為了防止用戶手動滑動，因為手動滑動在android上有問題 -->
    <scroller class="notice-mask"></scroller>
    <div class="notice-right">
      <text class="notice-right-text" @click="toNoticeDetail">詳情>></text>
    </div>
  </div>
</template>
<script>
  import { navigator } from '../../utils'
  import { notice } from '../../images/myIcon.js'
  import modal from '../../utils/modal'

  const dom = weex.requireModule('dom') || {}
  export default {
    name: 'Notice',
    props: {
      data: {
        type: String,
        default: ''
      },
      url: {
        type: String,
        default: ''
      }
    },
    data () {
      return {
        notice,
        time: 60, // 每隔多少ms滾動一次
        scrollLeft: 0,  // 滾動偏移量
        isIos: false, // 是否是IOS
        maxScroll: 10, //  滾動元素內容的寬度，默認100， 否則無法自動滾動
        isScroll: false,  // 是否觸發滾動事件
        toRight: true // true：從左往右滾動，false：從右往左滾動
      }
    },
    mounted () {
      // 判斷是否是iOS
      this.isIos = weex.config.env.platform.toLowerCase().indexOf('ios') > -1
      this.autoScroll()
    },
    methods: {
      /**
       * 跳轉事件
       */
      toNoticeDetail () {
        navigator.push({
          url: this.url
        })
      },
      /**
       * 自動滾動
       */
      autoScroll () {
        // 獲取scroller
        let el = this.$refs.scrollStart
        const timer = setInterval(() => {
          // 獲取公告內容元素
          const el1 = this.$refs.scrollText
          dom.getComponentRect(el1, function (ops) {
            // 獲取內容的寬度，如果小于 550 則不用滾動
            if (ops.size.width < 550) {
              clearInterval(timer)
            }
          })
          // 如果是向右側滾動，且 maxScroll 不為10（10是默認初始值），且 scrollLeft + 520 > maxScroll 則將 offset 設為 scrollLeft + 520
          // 應該是550，即 scroll 標簽的寬度，設置 520 是當滾動到最右側的時候，暫停一會兒
          if (this.toRight && this.maxScroll !== 10 && this.scrollLeft + 520 > this.maxScroll) {
            dom.scrollToElement(el, {offset: this.scrollLeft += 520})
          }
          // this.$emit('width', this.maxScroll)
          // 如果滾動的偏移量小于等于元素的寬度，即最大滾動區域maxScroll，則設為向左滾動
          if (this.toRight && this.scrollLeft <= this.maxScroll) {
            this.toRight = true
            // 如果偏移量為0，則暫停2s
            if (this.scrollLeft === 0) {
              setTimeout(() => {
                dom.scrollToElement(el, {offset: this.scrollLeft += 1})
              }, 1000)
            } else {
              // 否則偏移量直接 + 1
              dom.scrollToElement(el, {offset: this.scrollLeft += 1})
            }
          } else {
            // 否則，如果是向右滾動，且 maxScroll 不為 10，即滾動完畢，則把 scrollLeft - 520
            if (this.toRight && this.maxScroll !== 10) {
              dom.scrollToElement(el, {offset: this.scrollLeft -= 520})
            }
            // 方向設為向左滾動
            this.toRight = false
            if (this.scrollLeft <= 0) {
              setTimeout(() => {
                this.toRight = true
              }, 1000)
            } else {
              // 否則偏移量直接 + 1
              dom.scrollToElement(el, {offset: this.scrollLeft -= 1})
            }
          }
        }, this.time)
      },
      handleScroll (e) {
        // 如果是IOS，maxScroll + 20，ios 和 android 差 19
        if (this.isIos) {
          this.maxScroll = parseInt(e.contentSize.width + 1) + 20
        } else {
          this.maxScroll = parseInt(e.contentSize.width + 1)
        }
      }
    }
  }
</script>

<style scoped>
  .notice {
    width: 750px;
    height: 67px;
    background-color: rgba(254, 236, 191, 1);
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .notice-mask {
    position: absolute;
    top: 0;
    left: 70px;
    width: 560px;
    height: 67px;
  }

  .notice-left {
    width: 550px;
    height: 67px;
    flex-direction: row;
    align-items: center;
  }

  .notice-text {
    color: #2E2E2E;
    font-size: 24px;
    color: rgba(234, 138, 48, 1);
  }

  .notice-right-text {
    color: #f78c3d;
    font-size: 24px;
    padding-right: 20px;
    color: rgba(68, 104, 136, 1);
  }

  .notice-icon {
    width: 30px;
    height: 30px;
    margin-left: 20px;
    margin-right: 10px;
  }
</style>