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

CSS解决子元素横向排列撑开父元素宽度

最新推荐文章于 2024-07-24 11:16:38 发布

原创最新推荐文章于 2024-07-24 11:16:38 发布 · 808 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue #scrollbar

vue笔记专栏收录该内容

26 篇文章

订阅专栏

本文探讨了在CSS布局中，当子元素li单行横向排列时，父元素无法自动撑开宽度的问题及解决方案。通过两种方法实现：一是使用display:inline-block属性，二是通过JS动态计算并设置父元素宽度。

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

eg.源码：

         <div class="pic-wrapper">
                 <ul class="ul">
                        <li class="li" v-for="(pic, index) in pics" :key="index">
                            <img :src="pic"/>
                        </li>
                    </ul>
           </div>

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解决计算块级父元素宽度。

         <div class="pic-wrapper">
                 <ul class="ul" ref="picUl">
                        <li class="li" v-for="(pic, index) in pics" :key="index">
                            <img :src="pic"/>
                        </li>
                    </ul>
           </div>

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()
        }
    }
}