javascript - 使用vue组件+iscroll实现一个横向菜单，不能正确滑动

Question

使用vue组件+iscroll实现一个横向菜单，可是却不能滑动，给父元素ul写死一个宽度可以滑动。
但是，我在computed里计算宽度，直接路由进去不能滑动，当我进入别的组件（切换路由）回来又可以滑动了
示例地址：http://onepoint.stg4.v5time.net/news/1

<template>
  <p>
  <p id="wrapper" v-el:wrapper>
    <p id="scroller">
      <ul id="scrollerUl" v-el:ul :style="getWidth">
        <li v-for="item in menu" track-by="$index" class="li" :class="{bot:this.index==$index}"  @click="checkIt($index,item)">{{item.name}}</li>
      </ul>
    </p>
  </p>
  </p>
</template>
<style scoped>
  #wrapper{
    position: absolute;
    z-index: 1;
    height: 40px;
    left: 0;
    width: 100%;
    overflow: hidden;
  }
  #scroller{
    position: absolute;
    z-index: 1;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
  }
  #scroller ul{
    width: 100%;
    height: 100%;
    text-align: center;
  }
  #scroller li{
    float:left;
    height: 30px;
    line-height: 30px;
    width:1.6rem;
    list-style-type: none;
  }
  #scroller .bot{
    border-bottom:2px solid rgb(37, 190, 169);
  }
</style>
<script>
  import IScroll from 'iscroll/build/iscroll-lite.js'
  export default{
    props: {
      menu: {
        type: Array
      },
      selected: {
        type: Boolean,
        require: false,
        default: false
      }
    },
    data () {
      return {
        index: 0
      }
    },
    computed: {
      getWidth () {
        return 'width:' + this.menu.length * 1.6 + 'rem'
      }
    },
    ready () {
      var myScroll = new IScroll(this.$els.wrapper, {scrollX: true, scrollY: false})
      myScroll.say = ''
    },
    methods: {
      checkIt (index, item) {
        var lis = this.$els.ul.children
        lis[this.index].classList.remove('bot')
        this.index = index
        lis[index].classList.add('bot')
        this.$dispatch('click-msg', item)
      }
    }
  }
</script>

Answer 1

已解决。iscroll 需要获取到父元素的高度在初始化，需要监听到menu值变化后再初始化即可

Answer 2

setTimeout(function(){
//IScroll init...
},100)