使用uview组件的u-tab时，下划线移位且不居中

一只耗子

已于 2025-02-20 15:01:41 修改

阅读量362

点赞数 3

文章标签： java css vue.js

于 2025-02-20 14:55:46 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_48635062/article/details/145753596

版权

在使用uview组件开发小程序时，出现了以下情况，下划线偏右。

查了下，之前有不少大佬遇到过这种问题了，有把rpx强转成px的

/deep/ .u-tabs__wrapper__nav__line {
  width: 50px !important;
}

在css里设置这个样式，只是调整了宽度，并不解决不居中问题。

点开元素查看，发现是自带一个left的值，导致下划线偏移，可能是之前某个业务把tab里的组件默认样式改了。

在u-tab组件里找到这个样式，把left改成0即可。

      /deep/ .u-tabs__wrapper__nav__line {
        left: 62rpx;
      }

完成

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

一只耗子

关注关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

uView Tabs组件下划线移位问题解决方案

SvqiAnaconda的博客

09-26

1388

通过定义自定义样式和添加脚本逻辑，我们可以修复下划线的位置，并确保样式在切换标签页时正常显示。将"your-styles.css"替换为包含自定义样式的CSS文件路径，将"your-script.js"替换为包含脚本逻辑的JavaScript文件路径。在使用uView Tabs组件时，当切换不同的标签页时，下划线的位置可能会发生移位，导致样式出现错乱的情况。当点击标签页时，通过计算选中标签页的索引和偏移量，动态设置下划线的位置。解决这个问题的方法是通过自定义样式和一些脚本逻辑来修复下划线的位置。

uView的u-sticky组件，悬浮吸顶案例

DIY_v的博客

06-19

978

这个案例有点类似fixed悬浮了，具体问题我也不知道为什么跟官网演示的不同。此篇仅作日常问题记录，有问题欢迎大家发言，共同探讨学习。

参与评论您还未登录，请先登录后发表或查看评论

记录在使用uview-plus过程中u-tabs 字体变大后下面的滑块位置不对

m0_47668952的博客

03-19

913

【代码】记录在使用uview-plus过程中u-tabs 字体变大后下面的滑块位置不对。

uview中的utabs组件item字数不一致导致滑块偏移

qq_42874794的博客

06-27

878

给item单独设置宽度，使滑块计算准确。

uview1.0 tabs组件放到u-popup中在微信小程序中滑块样式错乱

最新发布

weixin_47517731的博客

04-17

339

【代码】uview1.0 tabs组件放到u-popup中在微信小程序中滑块样式错乱。

uniapp微信小程序 u-tabs 下划线不居中、行不填满对齐

weixin_56407381的博客

06-05

5383

原因：uView版本为2.X，默认为px单位，但lineWidth被页面编译为rpx单位，导致position计算错误。u-tabs中设置了lineWidth，高亮选项的下划线偏左不居中。设置属性:scrollable="false"即可。方案二：修改css为px单位的值。方案一：需要将单位改为。

关于uview-ui的u-tabs标签滑块不居中的问题

松之宅

12-11

3746

注意，代码中的18rpx需要自行调整。然后在style中添加以下代码即可。在uniapp中，打开文件。

uviewui u-tabs组件初始化下划线移位异常问题解决方案(全局生效)

weixin_39519691的博客

02-19

307

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

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

weixin_71807421的博客

03-12

1568

uview-tabs组件的下划线异常

uview2.0 tabs 使用fontsize修改菜单选中时的字体大小滑块不居中问题

qq_45736656的博客

01-31

2346

使用css缩放将字体变大，不影响滑块居中。bug虽小，亦是头疼。

uniapp uView u-picker组件三级联动Demo

02-12

- 5、change第一列时：第二列的数据为第一列高亮选项的详情；并把第三列的数据改变为第二列第一行的数据详情 - 6、change第二列时：第三列的数据为第二列高亮选项的详情 - 7、选择数据之后把数据赋值给`input`框显示...

change-uview:修改uview-ui组件的组价

03-23

例如，可能有`.u-tab-bar__content`或`.u-tab-item`等类名，这些类名控制了选项卡的排列方式。修改对应的`flex-direction`属性，将`row`改为`column`，以实现竖向布局。 4. **调整逻辑**：除了样式修改，可能还需要...

uView——uview 中 u-input 设置只读后点击事件不生效解决方案

qq_43201350的博客

01-12

2345

uView——uview 中 u-input 设置只读后点击事件不生效解决方案

uView——uview 解决 u-calendar 日历当 mode 为 range 模式，无法选择同一天

qq_43201350的博客

01-20

1096

uView——uview 解决 u-calendar 日历当 mode 为 range 模式，无法选择同一天

带下划线的不能居中对齐问题

qq_36734094的博客

05-28

1791

将段落格式，中文版式，允许西文在中间换行勾选上即可

uView组件u-tabs-swiper组件点击滚动无法居中问题

六国破灭，非兵不利，战不善，弊在赂秦。赂秦而力亏，破灭之道也。或曰：六国互丧，率赂秦耶？曰：不赂者以赂者丧，盖失强援，不能独完。故曰：弊在赂秦也。秦以攻取之外，小则获邑，大则得城。较秦之所得，与战胜而得者，其实百倍；诸侯之所亡，与战败而亡者，其实亦百

12-29

1696

uView组件u-tabs-swiper组件点击滚动无法居中问题。解决方法：找到u-tabs-swiper.vue文件，找到watch监听这里，调换两个方法的执行顺序

【uview】关于uview组件库tabs组件点击时不自动居中滑动元素的问题：

Bole6666666的博客

08-26

1098

使用tabs组件时，包含tabs组件的父盒子属性中不要出现弹性布局的属性display:flex；不然tabs自带的点击居中效果会失效。//自动居中后的效果。

【踩坑日记】uView的tabs组件在h5环境下的当前tab不居中而底部的tabbar居中

QAQ_ing的博客

12-14

1993

uView的tabs组件在h5环境下的当前tab不居中

uniapp使用uview u-tab，下划线异常

m0_62152730的博客

03-15

6692

1、问题描述，tab切换之后，再返回，导致下划线位置异常 2、分析原因 Tab 挂载的时候会初始化并获取自身宽度，如果处于隐藏状态下，Tab 是获取不到自身宽度的，因此底部条的位置没法正确计算 3、解决方案当数据回显之后，在从新渲染tab组件。 this.showTap = false this.$nextTick(() => { this.showTap = true ...

uview 组件u-notice-bar 滚动内容较少时禁止滚动

11-02

UView组件中的`u-notice-bar`是一个通知提示条，如果你想要在滚动内容较少的情况下禁止其滚动，通常需要设置一些样式和属性。你可以通过以下步骤来实现： 1. 首先，在`u-notice-bar`元素上禁用`overflow-notice-bar :style="{ overflowY: 'hidden' }"> ... </u-notice-bar> ``` 2. 如果你使用的是Vue.js或类似的框架，可以在组件的data里设置一个变量，然后根据内容长度动态控制是否启用滚动： ```javascript export default { data() { return { noticeContent: '少量内容', // 根据实际内容替换 showScroll: false, // 初始设为false，只有当内容较多时才允许滚动 }; }, computed: { scrollStyle() { return this.showScroll ? {} : { overflowY: 'hidden' }; } }, methods: { handleContentChange(newContent) { if (newContent.length < someThreshold) { this.showScroll = false; } else { this.showScroll = true; } }, }, watch: { content(newContent) { this.handleContentChange(newContent); }, }, }; ``` 这里假设`someThreshold`是你设定的一个阈值，如果内容长度小于这个值，则禁止滚动。