瀑布流在pc端和移动端切换时没有自动变化

Question

瀑布流组件里面：

F12切换时，views/main/components/list/index.vue没有重新加载，也就没有重新执行isMobileTerminal，导致column没有监听到。

原因，在切换f12时 props.column 没有监听到变化，老师，这是为啥？

Answer 1

提问者 慕妹4110997 2022-12-19 12:50:07

// 触发计算

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组件里面的监听列宽计算的代码

Answer 2

提问者 慕妹4110997 2022-12-19 11:33:59

老师，在f12切换的时候这个都没有打印

• Sunday #1

  你这样写是不会打印的，因为他只在 setup 函数中打印了一次。

Answer 3

Sunday 2022-11-20 10:21:51

你好

你的 watch 监听是怎么写的？  如果要监听 prop 那么需要指定一个 getter 的函数

• 提问者 慕妹4110997 #1

  老师您看下我的回复在上面