这是一个创建于 511 天前的主题，其中的信息可能已经有所发展或是发生改变。
我发完贴回去刷新了一下就发现 initialValue 生效了。。Why ？？？？？？？
所以下一个问题是，手机松开滑动时才会响应 resize 事件，，有什么方案优化么？
手机端的 100vh 和实际并不一致，会被浏览器自身的底部工具条遮挡，所以用了 window.innerHeight * 0.01 自动计算，然而加载完成后并不能成功初始化；
// const vhSize = useCssVar('--vhSize', appLeft, { initialValue: GetVh() })
const vhSize = useCssVar('--vhSize', appLeft, { initialValue: '7.56px' })
// 上边 initialValue 指定不生效
const setVhSize = () => {
vhSize.value = GetVh()
}
// setVhSize()
// 无论是这样直接调用还是写在 onMounted() 里都不管用
// 这里响应窗口变化到是正常
useEventListener(window, 'resize', (event) => {
setVhSize()
})
useCssVar | VueUse 中文文档：
第 1 条附言 · 2023-07-04 11:40:36 +08:00
就超级无语，生效是因为我在 css 里指定了一个值。。然而这个值只适用于我物手机屏幕 - -
`{ initialValue: GetVh() } `内返回值是 7.56 ，是符合预期的，然而没能给到元素的 style ；
```js
onMounted(() => {
setVhSize() // 8.54
setTimeout(() => {
setVhSize() // 7.56
}, 3000);
})
```
无论值对不对，都不能直接通过 vhSize.value 初始化给 CSS 变量，除非延迟执行 + 手动 setProperty 。。就很蛋疼
`{ initialValue: GetVh() } `内返回值是 7.56 ，是符合预期的，然而没能给到元素的 style ；
```js
onMounted(() => {
setVhSize() // 8.54
setTimeout(() => {
setVhSize() // 7.56
}, 3000);
})
```
无论值对不对，都不能直接通过 vhSize.value 初始化给 CSS 变量，除非延迟执行 + 手动 setProperty 。。就很蛋疼
 |
1
wdssmq OP up. 手机端侧栏高度设置 · wdssmq/Just-Imgs@17d7c37
https://github.com/wdssmq/Just-Imgs/commit/17d7c37dae6294269a18c77667eb2ce9b91fe4a6 姑且用 nextTick() 搞定了。。 |
Select Language