uni-app vue3 宽屏适配时 resize事件没有更新 window-right，导致tabbar宽度异常 vue2无问题

uni-app vue3 宽屏适配时 resize事件没有更新 window-right，导致tabbar宽度异常 vue2无问题

操作步骤：

  • vue3 宽屏适配时 resize事件没有更新–window-right，导致tabbar宽度异常, vue2无问题

预期结果：

  • vue3 宽屏适配时tabbar宽度正常

实际结果：

  • vue3 宽屏适配时 resize事件没有更新–window-right，导致tabbar宽度异常

bug描述：

  • vue3 宽屏适配时 resize事件没有更新–window-right，导致tabbar宽度异常, vue2无问题

更多关于uni-app vue3 宽屏适配时 resize事件没有更新 window-right，导致tabbar宽度异常 vue2无问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

14 回复

你好，是否可以提供一下一个可以复现的项目？

更多关于uni-app vue3 宽屏适配时 resize事件没有更新 window-right，导致tabbar宽度异常 vue2无问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


好的，我建一个

https://gitcode.com/EntropyM/starter 配置如下，是不支持calc 么，vue2时是正常的 “rightWindow”: { “path”: “windows/right-window.vue”, “style”: { “width”: “calc(100vw - 375px)” }, “matchMedia”: { “minWidth”: 768 } },

回复 EntropyM: 在哪里用到的，该从哪里看你的示例?

回复 DCloud_UNI_yuhe: https://gitcode.com/EntropyM/starter 宽屏时>768显示right-window，此时调整浏览器宽度，右侧宽度并没有变化

回复 EntropyM: 你提供的代码包含了非常多与问题无关的内容，是否可以提供一下更近简单的版本？只包含有问题相关的内容

回复 DCloud_UNI_yuhe: 这个就是你们的starter代码，只需关注tabbar的css，使用了right: var(–window-right), 但是window-right 被写死了，并不是配置里的"width": “calc(100vw - 375px)”

回复 EntropyM: 不清楚你什么意思，还请你详细说一下，这个 rightWindow 的 width 不是 tabbar 的 right

回复 DCloud_UNI_yuhe: 不好意思，没表达清楚，.uni-tabbar { position: fixed; left: var(–window-left); right: var(–window-right); } 这个window-right 是个固定值，这样在拖动窗口时tabbar的宽度就会被缩放，而不是固定的剩余空间375px，可以看下图

回复 EntropyM: 您最好就是新建一个项目，只保留问题部分代码，这样比较容易复现和确认问题

回复 DCloud_UNI_yuhe: 这就你们starter模板，加一个rightwindow，啥都没动，这运行下，拉动浏览器就复现了


我先自己写死了 html {
–window-right: calc(100vw - 375px) !important;
}

这是一个已知的Vue3环境下的CSS变量更新问题。在Vue3中，响应式系统与Vue2有所不同，可能导致--window-right等CSS变量在窗口resize时未能及时更新。

解决方案：

  1. 手动监听窗口resize事件
import { onMounted, onUnmounted } from 'vue'

onMounted(() => {
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
})

const handleResize = () => {
  // 强制更新布局相关变量
  uni.getSystemInfo({
    success: (res) => {
      // 触发样式重新计算
      document.documentElement.style.setProperty('--window-right', res.windowWidth + 'px')
    }
  })
}
  1. 使用computed属性动态计算样式
<template>
  <view :style="tabbarStyle">
    <!-- tabbar内容 -->
  </view>
</template>

<script setup>
import { computed, ref, onMounted, onUnmounted } from 'vue'

const windowWidth = ref(0)

const updateWindowSize = () => {
  uni.getSystemInfo({
    success: (res) => {
      windowWidth.value = res.windowWidth
    }
  })
}

const tabbarStyle = computed(() => {
  return {
    width: windowWidth.value + 'px',
    right: '0'
  }
})

onMounted(() => {
  updateWindowSize()
  window.addEventListener('resize', updateWindowSize)
})

onUnmounted(() => {
  window.removeEventListener('resize', updateWindowSize)
})
</script>
回到顶部