微信小程序scroll-view中，最后一个元素右边距无效的问题

问题描述

<scroll-view class="container" enable-flex scroll-x>
  <view class="item">1</view>
  <view class="item">2</view>
  <view class="item">3</view>
  <view class="item">4</view>
  <view class="item">5</view>
  <view class="item">6</view>
</scroll-view>

.container {
  display: flex;
  margin-top: 20vh;
  height: 50rpx;
}

.item {
  padding: 10rpx 100rpx;
  background-color: #f0f0f0;
  margin-right: 40rpx;
}

最后一个item元素明明有margin-right，但就是无法继续往左滑了

解决方案

添加一个占位元素放在最右边，并且使其尽可能的不可见（width:0 height:0 无效，还是会占有位置）

<scroll-view class="container" enable-flex scroll-x>
  <view class="item">1</view>
  <view class="item">2</view>
  <view class="item">3</view>
  <view class="item">4</view>
  <view class="item">5</view>
  <view class="item">6</view>
  <view class="placeholder"></view>
</scroll-view>

.container {
  display: flex;
  margin-top: 20vh;
  height: 50rpx;
}

.item {
  padding: 10rpx 100rpx;
  background-color: #f0f0f0;
  margin-right: 40rpx;
}

.placeholder {
  padding-right: 1px;
  opacity: 0;
  pointer-events: none;
}

tips
你可能想将placeholder换成伪元素，但我验证下来的结果是伪元素无效，它没有实际的占取位置。