實現(xiàn)方式
1.flex配合js
原理
列表提前加載一次云茸,計算高度雨女,然后分別加入左右兩個列表舶替,最后渲染兩個列表
先加載
export default defineComponent({
setup() {
const loadRef = ref(null)
const state = reactive({
loading: false,
finished: false,
params: {
pageSize: 10,
pageNo: 0
},
dataList: [],
left: {
list: [],
height: 0
},
right: {
list: [],
height: 0
},
total: 0
})
const onLoad = async () => {
try {
state.loading = true
const {
data: { data, total}
} = await FetchDataList(state.params)
// 用于提前加載
state.dataList = data
state.total = total
state.params.pageNo++
nextTick(() => {
// 獲取提前加載的dom
const arr = loadRef.value.querySelectorAll('.item')
datas.forEach((e, i) => {
// 實際展示的列表豆赏,根據(jù)高度判斷push到對應(yīng)數(shù)組
const listName =
state.left.height <= state.right.height ? 'left' : 'right'
state[listName].list.push(e)
state[listName].height += arr[i].offsetHeight
})
})
} finally {
state.loading = false
}
}
return {
lecturer,
onLoad,
...toRefs(state)
}
},
render() {
return (
<List
vModel={this.loading}
finished={this.finished}
onLoad={this.onLoad}
immediate-check={true}
>
<!-- 提前渲染的內(nèi)容 -->
<div
ref="loadRef"
style="opacity: 0;position: fixed; left: -999px;top: -999px"
>
{this.dataList.map(e => (
<Item data={e} />
))}
</div>
<!-- 實際展示的內(nèi)容 -->
<div class="container">
<div>
{this.left.list.map(e => (
<Item data={e} />
))}
</div>
<div>
{this.right.list.map(e => (
<Item data={e} />
))}
</div>
</div>
</List>
)
}
})
// style
.container {
display: flex;
padding: 15px 15px 0;
justify-content: space-between;
& > div {
width: 168px;
display: flex;
flex-wrap: wrap;
flex-direction: column;
counter-reset: items;
min-height: 100vh;
}
}
優(yōu)點
- 可以應(yīng)對內(nèi)容高度未知的情況
- 可以分頁
缺點
- 需要計算束凑,性能有損耗
2.flex
.container{
display: flex;
flex-wrap: wrap;
flex-direction: column;
height: 800px;
}
優(yōu)點
- 無需js配合
缺點
- 需要提前知道內(nèi)容高度晒旅,并設(shè)置容器高度
- 不支持分頁
3.column-count
.container{
column-count: 2;
.item {
break-inside: avoid;
}
}
優(yōu)點
- 無需js配合
- 簡單,不需要知道內(nèi)容高度汪诉,不需要設(shè)置容器高度
缺點
- 不支持分頁(分頁時新加載的內(nèi)容會展示在第二列的最上面)