weex自动来回滚动公告组件

项目中最近又个业务，要写一个自动滚动的组件，本想找一个现成的组件，但是找不到，然后就开始造轮子了

<!--
  组件名 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>