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. 论坛的插入代码真垃圾)
.menus 去掉 justify-content: center;
看看这个 代码片段 吧