<template>
  <scroller>
    <panel title="Basic" type="primary">
      <div
        :style="{
          width: fullW,
          borderColor: '#333',
          borderWidth: 1,
          borderStyle: 'solid'
        }">
        <div
          :style="{
            width: w,
            height: 60,
            backgroundColor: '#333'
          }"></div>
      </div>
    </panel>
  </scroller>
</template>

<script>
  var INC = 20;
  module.exports = {
    data: function () {
      return {
        fullW: 600,
        w: 40
      }
    },
    components: {
      panel: require('../include/panel.vue')
    },
    created: function() {
      var me = this;
      setInterval(function () {
        if (me.w >= me.fullW) {
          me.w = 0
        }
        me.w = (me.w + INC >= me.fullW) ? me.fullW : me.w + INC
      }, 33);
    }
  }
</script>