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

Question

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端，滑块则是显示在正确的位置。

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

Answer 1

晓之蛇 2023-02-07 10:58:38

.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像素，给下划线腾出显示的位置，我是这么搞的。

Answer 2

Sunday 2022-03-02 21:00:23

你好

这种问题应该是微信和 H5 的 css 差异性导致的。具体的原因需要进行代码的调试才可以知道。如果你无法解决这个问题的话，可以在 QQ 上打包你的项目发送给我

• 提问者 ForCoke #1

  老师，我刚刚尝试了一下，原先我的scroll-view组件中直接存放遍历的view组件和underLine滑块，但是现在我在scroll-view组件中先包裹一层view并开启相对定位，再在这个view容器中存放遍历的view组件和滑块，此时滑块不在相对于scroll-view组件定位，而是相对于新添加的这个view组件定位。这个时候，滑块在小程序和H5端都能正常显示了。我感觉这个定位出现问题是不是因为scroll-view有什么特殊性从而导致的啊？

• Sunday 回复 提问者 ForCoke #2

  据我梭子 scroll-view 是基于 view 的一个子类，并不存在其特殊性。会不会是忘记在  scroll-view 中增加 relative 相对定位导致的？