瀑布流在pc端和移动端切换时没有自动变化
来源：4-5 话题讨论：如何理解前台前端架构方案？
慕妹4110997
2022-11-20
瀑布流组件里面：
F12切换时，views/main/components/list/index.vue没有重新加载，也就没有重新执行isMobileTerminal，导致column没有监听到。
原因，在切换f12时 props.column 没有监听到变化，老师，这是为啥？
3回答
-
慕妹4110997
提问者
2022-12-19
// 触发计算
watch(
() => props.data,
(newVal) => {
// 重置数据源
const resetColumnHeight = newVal.every((item) => !item._style)
if (resetColumnHeight) {
// 构建高度记录容器
useColumnHeightObj()
}
nextTick(() => {
if (props.picturePreReading) {
waitImgComplate()
} else {
useItemHeight()
}
})
},
{
immediate: true,
deep: true
}
)
/**
* 监听列数变化，重新构建瀑布流
*/
const reset = () => {
setTimeout(() => {
// 重新计算列宽
useColumnWidth()
// 重置所有的定位数据，因为 data 中进行了深度监听，所以该操作会触发 data 的 watch
props.data.forEach((item) => {
item._style = null
})
}, 100)
}
watch(
() => props.column,
() => {
if (props.picturePreReading) {
// 在 picturePreReading 为 true 的前提下，需要首先为列宽滞空，列宽滞空之后，会取消瀑布流渲染
columnWidth.value = 0
// nextTick 数据改变之后，视图改变之后的回调
// 等待页面渲染之后，重新执行计算。否则在 item 没有指定过高度的前提下，计算出的 item 高度会不正确
nextTick(reset)
} else {
reset()
}
}
)
老师，这个是waterfull组件里面的监听列宽计算的代码
00 -
慕妹4110997
提问者
2022-12-19
老师，在f12切换的时候这个都没有打印
012022-12-19 -
Sunday
2022-11-20
你好
你的 watch 监听是怎么写的？ 如果要监听 prop 那么需要指定一个 getter 的函数
012022-12-19
相似问题