Vue 因父元素没有撑开所需的宽度，不能横向滚动

当子元素li竖向排列时，父元素可以撑开高度的。但当多个子元素li单行横向排列，父元素却无法撑开宽度，并且宽度固定为页面宽度。
而当需要横向滚动，父元素需要撑开宽度才可以进行滚动。

eg.源码：

mounted() {
        new BScroll('.pic-wrapper', {
            scrollX: true
        })
    }

   .pic-wrapper
      width 100%
      overflow hidden
      white-space nowrap
      margin-top 16px
     .ul
        font-size 0
        .li
          display inline-block
          margin-right 6px
          width 120px
          height 90px

可以看到li每个宽度是120px，每个li之间的空隙是6px。
这里其实总共5个li，因此可以计算到父元素ul所需宽度624px。

解决：
第一种：

,ul
  font-size 0
  display inline-block

注意：
如果不设定块级父元素宽度，则默认父元素宽度。如果需要子元素动态撑开父元素宽度，需要给父元素加上display: inline-block。

第二种：
JS解决计算块级父元素宽度。

mounted() {
       const ul = this.$refs.picUl
       const liWidth = 120
       const space = 6
       const num = this.pics.length
       ul.style.width = (liWidth + space) * num - space
       
        new BScroll('.pic-wrapper', {
            scrollX: true
        })
    }

如果this.pics是异步获取数据，则需要判断数据是否已有且最新：

mounted() {
     // 判断this.pics数据有没有（如果this.pics是异步获取则需要判断），没有直接结束。
      if(!this.pics.length) {
          return
      }
       this._initScroll()
    },
methods: {
       const ul = this.$refs.picUl
       const liWidth = 120
       const space = 6
       const num = this.pics.length
       ul.style.width = (liWidth + space) * num - space
       
        new BScroll('.pic-wrapper', {
            scrollX: true
        })
},
watch () {
    // 异步获取数据需要 刷新后更新
    pics() {
        this.$nextTick() {
            this._initScroll()
        }
    }
}