uview-tabs组件的下划线异常-vue2

1、原因

Tab 挂载的时候会初始化并获取自身宽度,如果处于隐藏状态下,Tab 是获取不到自身宽度的,因此底部条的位置没法正确计算

2、解决方案-vue2

当数据回显之后,在从新渲染tab组件。

onShow() {
            // 方法一
            // this.showTap = false;
            // this.$nextTick(() => {
                // this.showTap = true // 解决uview u-tab,下划线异常
            // });
            // 方法二
             this.$refs.tabs.resize();
        },

3、解决方案-vue3

// #ifndef MP-ALIPAY
// 具体适用哪些平台见文档
let home_tabs = ref<any>(null);
uni.onWindowResize((res)=>{
	// console.log('监听屏幕变化res,重置tabs的下划线位置',res);
	  if(home_tabs.value)  home_tabs.value.resize();
})
// #endif

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
要查看uview-ui组件库的版本和你当前项目的版本是否兼容,可以按照以下步骤进行操作: 1. 打开你的项目文件夹,在终端或命令提示符中进入项目的根目录。 2. 在终端中运行以下命令来查看uview-ui组件库的版本信息: ```shell npm show uview-ui version ``` 这将显示uview-ui组件库的最新版本号。 3. 在你的项目中,打开 `package.json` 文件,在 `dependencies` 或 `devDependencies` 部分找到uview-ui的依赖项,并查看其版本号。 4. 将uview-ui组件库的版本号与你项目中使用的版本号进行对比。确保两者兼容。 如果uview-ui组件库的版本与你的项目版本不兼容,可以尝试以下解决方法: - 如果uview-ui组件库的版本太低,可以尝试升级uview-ui到与你的项目兼容的最新版本。可以使用以下命令来更新uview-ui: ```shell npm update uview-ui ``` - 如果uview-ui组件库的版本太高,而你的项目无法兼容,请考虑降级uview-ui到与你的项目兼容的较低版本。可以使用以下命令来降级uview-ui: ```shell npm install uview-ui@<version> ``` 注意,`<version>`应该替换为与你的项目兼容的具体版本号。 确保在进行版本更改之前备份你的项目文件,并测试确保更改后没有引入其他问题。 通过上述步骤,你应该能够查看uview-ui组件库的版本并与你的项目进行兼容性比较。根据比较结果,你可以决定升级或降级uview-ui以解决兼容性问题。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值