uni-app の scroll-view 横スクロール右マージンが効かない

望ましい効果

フレックスレイアウトを使用することによって得られる効果は得られません

コードは以下のように表示されます:

<scroll-view scroll-x>
  <view class="flexBox bodyBox paddingLeft30 paddingBottom20 paddingTop10 paddingRight30">
    <view class="bestSellBox paddingBottom10" :class="{ marginLeft16: i > 0 }" v-for="(item, i) in hotList" :key="i">
      <u-image width="260rpx" height="190rpx" border-radius="8" :src="item.img1" />
      <view class="marginTop6 paddingLeft10 fontSize26 fontWeight700">{
   
   { item.title }}</view>
      <view class="marginTop6 paddingLeft10 fontSize22"></view>
      <view class="marginTop6 paddingLeft10 fontSize22"></view>
    </view>
  </view>
</scroll-view>

解決策 1

display: inline-flex を使用し、display: flex; をscroll-view 子要素で  使用しないでください 

display: inline-flex;

理由：クラスが bodyBox の子要素（view）の幅は scroll-view と同じ幅のため、display:flex; に設定しても機能しない（つまり、scroll-view はオーバーフローしないため、パディングが発生する）うまくいかない）

<scroll-view scroll-x>
  <view class="bodyBox paddingLeft30 paddingBottom20 paddingTop10 paddingRight30" style="display: inline-flex">
    <view class="bestSellBox paddingBottom10" :class="{ marginLeft16: i > 0 }" v-for="(item, i) in hotList" :key="i">
      <u-image width="260rpx" height="190rpx" border-radius="8" :src="item.img1" />
      <view class="marginTop6 paddingLeft10 fontSize26 fontWeight700">{
   
   { item.title }}</view>
      <view class="marginTop6 paddingLeft10 fontSize22"></view>
      <view class="marginTop6 paddingLeft10 fontSize22"></view>
    </view>
  </view>
</scroll-view>

 解決策 2

scroll-view を使用する代わりに、  overflow-x: scroll + flexの実装に変更します。

overflow-x: scroll;

欠点はスライド時にスクロールバーが表示されることで、cssで手動でスクロールバーを削除する必要があります

<view class="flexBox bodyBox paddingLeft30 paddingBottom20 paddingTop10 paddingRight30" style="overflow-x: scroll">
  <view class="bestSellBox paddingBottom10" :class="{ marginLeft16: i > 0 }" v-for="(item, i) in hotList" :key="i">
    <u-image width="260rpx" height="190rpx" border-radius="8" :src="item.img1" />
    <view class="marginTop6 paddingLeft10 fontSize26 fontWeight700">{
   
   { item.title }}</view>
    <view class="marginTop6 paddingLeft10 fontSize22"></view>
    <view class="marginTop6 paddingLeft10 fontSize22"></view>
  </view>
</view>

効果は次のとおりです。