当子元素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()
}
}
}