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

这篇具有很好参考价值的文章主要介绍了uniapp微信小程序 u-tabs 下划线不居中、行不填满对齐。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

 下划线不居中

        u-tabs中设置了lineWidth,高亮选项的下划线偏左不居中。例如:

uniapp 下划线,uni-app,javascript,vue.js

 原因:uView版本为2.X,默认为px单位,但lineWidth被页面编译为rpx单位,导致position计算错误。u-tabs计算源码: uniapp 下划线,uni-app,javascript,vue.js

 解决方案:

方案一:在main.js中将uView的配置改回px单位,即删除配置uView单位为rpx,使其默认为px

// main.js,注意要在use方法之后执行
import uView from 'uview-ui'
Vue.use(uView)
// 如此配置即可
//uni.$u.config.unit = 'rpx'   // or  uni.$u.config.unit = 'px'

 方案二:强制修改css为px单位的值

<u-tabs :list="list1" 
   :lineWidth="35"
></u-tabs>
/deep/ .u-tabs__wrapper__nav__line {
    width: 35px !important;
}

行选项少未填满对齐

当list选项较少未均匀分布对齐时:

uniapp 下划线,uni-app,javascript,vue.js

 设置属性:scrollable="false"即可

uniapp 下划线,uni-app,javascript,vue.js文章来源地址https://www.toymoban.com/news/detail-656037.html

到了这里,关于uniapp微信小程序 u-tabs 下划线不居中、行不填满对齐的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 关于修改element-ui中Tabs标签页选中标签下划线缩短居中效果的实现方法

    需求描述: 下划线需要改为原来的一半,并且可以根据元素长度动态更换长度。 原样式: 改为以下样式: 思路如下 :element-ui通过一个独立的元素实现tab间切换能够达到下划线滑动的动态效果,所以将下划线独立为一个元素,并非使用tab自身的盒子设置下边框的样式去实现

    2024年02月12日
    浏览(43)
  • 修改element-ui中Tabs标签页下划线默认颜色的方法以及为什么设置了.el-tabs /deep/ .el-tabs__nav-wrap::after不起效果

    类似图上的灰色线段,这是Tabs的默认样式, 在项目中的路径位置在:node_modules/element-ui/theme-chalk/tag.css   (我原本想在源文件直接改颜色的,但是找了一圈不知道哪个是他的颜色哈哈哈) 方法是: /deep/ 深度作用操作符:可以使样式作用的更深,例如影响子组件。 同时,

    2024年02月09日
    浏览(41)
  • 详解Python单下划线和双下划线使用

    在Python编程中,我们经常会遇到单下划线(_)和双下划线(__)的使用。它们在命名标识符、变量、方法和属性中扮演着不同的角色。本文将详细解释Python中单下划线和双下划线的含义和用法,并通过代码示例进行讲解,帮助你理解它们的作用和适用场景。 命名约定。在Py

    2024年02月10日
    浏览(40)
  • Python 中的单下划线和双下划线

    哈喽大家好,我是咸鱼 当我们在学习 Python 的时候,可能会经常遇到单下划线 _ 和双下划线 __ 这两种命名方式 单下划线 _ 和双下划线 __ 不仅仅是只是一种简单的命名习惯,它们在 Python 中有着特殊的含义,对于代码的可读性和功能实现有着关键的作用。 那么今天我们来看一

    2024年02月05日
    浏览(43)
  • HTML中设定下划线样式并且指定下划线长度

    今天笔者在写网页导航栏时,想要给链接加一个悬停下划线,写出来如下 HTMl: CSS:(关于其他格式的设定略,只看下划线这一段代码) 这样确实是设定下划线了,但是效果如下,看上去很难看 既然这样,那么该如何改变一下呢? 其实可以使用border-bottom来实现,代码如下

    2024年02月10日
    浏览(39)
  • css 下划线

    在 CSS 中,可以使用 \\\"text-decoration\\\" 属性来设置文本的下划线。例如: 这会使所有的段落文本都带有下划线。你也可以使用 \\\"text-decoration-style\\\" 属性来设置下划线的样式,例如实线、虚线或点线等。 你还可以使用 \\\"border-bottom\\\" 属性来设置下划线,例如: 这会在段落文本下方添加

    2024年02月12日
    浏览(34)
  • css下划线跟随导航

    2024年01月23日
    浏览(39)
  • a标签设置下划线动画

     

    2024年02月07日
    浏览(42)
  • React Native文本添加下划线

    2024年02月13日
    浏览(38)
  • Java实现驼峰、下划线互转

    Java实现驼峰、下划线互转 1.使用 Guava 实现 先引入相关依赖 1.2 下划线转驼峰 2.自定义代码转 2.1驼峰转下划线 2.2下划线转驼峰

    2024年02月12日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包