如何解决scroll-view设置justify-content后左侧少一部分？
发布于 7 年前 作者 shaojun 3492 次浏览 来自 官方Issues

scroll-view组件横向滚动，设置固定宽度，设置justify-content: center;之后，最左侧的view会少一部分。

页面是Component构造器写的。

<scroll-view
        id="scroll-view"
        class="menus"
        scroll-x="{{true}}"
        enable-flex="{{true}}"
        scroll-with-animation="{{true}}"
        scroll-left="{{scrollViewLeft}}">
    <view
        id="menus-item-{{menuIndex}}"
        class="menus-item"
        wx:for="{{list}}"
        wx:for-item="menuItem"
        wx:for-index="menuIndex"
        data-index="{{menuIndex}}"
        bindtap="menuItemClickEvent">
        <view class="menus-item-line" wx:if="{{menuIndex === currentIndex}}"></view>
        <view class="menus-item-text">{{menuItem.text}}</view>
        <view class="menus-item-ball{{menuIndex === currentIndex ? ' menus-item-ball-current' : ''}}"></view>
    </view>
</scroll-view>




page {
  width: 100%;
  background-color: #3c4866;
}
view {
  margin: 0;
  padding: 0;
  position: relative;
  line-height: 0;
}
.menus {
  width: calc(100% - 120rpx - 70rpx - 90rpx);
  height: calc(38rpx + 44rpx);
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin: 0 auto;
}
.menus-item {
  height: 100%;
  flex-shrink: 0;
  width: fit-content;
}
.menus-item-line {
  position: absolute;
  width: 100%;
  height: 8rpx;
  left: 0;
  top: calc(50% - 4rpx);
  border-radius: 4rpx;
  background-color: #f85151;
}
.menus-item-text {
  font-family: PingFangSC-Regular;
  text-align: center;
  font-size: 19rpx;
  color: #dce6ff;
  line-height: 1;
  padding: 0 10rpx;
  min-width: 80rpx;
}
.menus-item-ball {
  width: 22rpx;
  height: 22rpx;
  border-radius: 11rpx;
  background-color: #959cac;
  position: absolute;
  left: calc(50% - 11rpx);
  top: calc(50% - 11rpx);
}
.menus-item-ball-current {
  background-color: #f85151;
}

样子如图：

代码片段：

https://developers.weixin.qq.com/s/jczRb0mw7Cb4

请问，这应该如何解决？

(PS. 论坛的插入代码真垃圾)

1 回复

.menus 去掉 justify-content: center;

回到顶部