uview中tabar加入中间凸起功能

发布日期： 2025-02-22 17:40 阅读量： 159 来源： 互联网

公司新的项目移动端前端是使用uview框架的，ui出了图中间是凸起的，这个首先觉得是不难的，因为找到最基本的组件，把里面的css替换就行了，结果进去之后发现不是那么回事，再检查发现里面改起来更复杂，后面再去研究uview的官方文档，发现里面确实没有凸起这种设计.

网上一通搜，找了个方法，用css解决，当然是不可用的，因为里面的版本已经更新了，css名称无法使用，找到正确的css，然后通过找第二个实现

:deep(.u-tabbar__content__item:nth-child(2) .u-icon__img) {
    /* 选择中间的 tabbar-item */
    background-color: #f5f5f5; /* 背景颜色 */
    border-radius: 50%; /* 使按钮看起来更圆 */
    width: 3rem !important; /* 宽度 */
    height: 3rem !important; /* 高度 */
    margin-top: -1.8rem; /* 根据需要调整位置 */
    position: relative; /* 相对定位 */
    z-index: 10; /* 确保在最上面 */
}

后面再进原始组件里面找，很惊喜，里面居然有midButton这个传参，

再后面想在什么地方插入自己的代码，完成修改，AI生成，居然真的完成了，稍加修改跑通，OK

下一篇：: ps切图保存htm中设置所有切片为jpg等统一格式

uview中tabar加入中间凸起功能

随便看看