滑块在微信端无法正常显示，在H5端可以正常显示

来源：5-17 tabs组件 - 定义滑块

ForCoke

2022-03-02

1、代码

	<view class="tab-container">
		<scroll-view scroll-x class="scroll-view" scroll-with-animation>
			<view class="tab-Item" :class="{'tab-Item-active':activeIndex === index}" 
						v-for="(item,index) in tabData" :key="index"
						@click="onTabClick(index)"
			>
				{{item.label || item}}
			</view>
			<!-- 定义滑块 -->
			<view class="underLine" :style="{'transform':'translateX('+slider.left+'px)'}"></view>
		</scroll-view>
	</view>

css样式：

.tab-container{
	height: 45px;
	line-height: 45px;
	font-size: $uni-font-size-base;
	background-color: $uni-bg-color;
	.scroll-view{
		width: 100%;
		height: 45px;
		white-space: nowrap;
		position: relative;
		.tab-Item{
			display: inline-block;
			height: 100%;
			padding: 0 15px;
			text-align: center;
			color: $uni-text-color;
			// 激活状态
			&-active{
				color: $uni-text-color-hot;
				// font-weight: bold;
			}
		}
		// 滑块
		.underLine{
			height: 2px;
			width: 25px;
			background-color: $uni-text-color-hot;
			border-radius: 3px;
			transition: 0.5s;
			position: absolute;
			// bottom: 10px;
			// top: 0px;
			bottom: 0px;
			z-index: 9;
		}
	}
}

2.问题：
在微信端，滑块不显示，但是如果定位参数设置为top：0px则可以显示出来，并且可以看出是相对于scroll-view进行的定位。同时如果设置bottom：20px；也可以显示在正确的位置。此时bottom：0px；可以看出滑块位置不对，企且被什么遮挡了。但是scroll-view已经设置了position：relative；并且scroll-view的位置大小没有问题啊。
图片描述
但是在bottom：0px；的情况下，H5端，滑块则是显示在正确的位置。

老师，这个问题麻烦您看一下，是什么导致的。

写回答

2回答

晓之蛇

2023-02-07

.tab-container {
  font-size: $uni-font-base;
  height: 45px;
  line-height: 45px;
  background-color: $uni-bg-color;
  .tab-box {
    width: 100%;
    height: 100%;
    .scroll-view {
      white-space: nowrap;
      box-sizing: border-box;
      .scroll-content {
        .tab-item-box {
          display: flex;
          height: 43px;
          .tab-item {
            height: 100%;
            display: inline-block;
            text-align: center;
            padding: 0 15px;
            text-align: center;
            color: $uni-main-color;
            &-active {
              color: $uni-text-color-hot;
            }
          }
        }
        .underline {
          border-radius: 1px;
          transition: 0.5s;
        }
      }
    }
  }
}

tab-item-box少给2像素，给下划线腾出显示的位置，我是这么搞的。

//img.mukewang.com/szimg/63e1be3009ad6f9e03160222.jpg