The scroll-view horizontal scrolling right margin of uni-app does not take effect

desired effect

The effect obtained by using flex layout is not achieved

code show as below:

<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>

Solution 1

Use display: inline-flex;  do not use  display: flex; in scroll-view child elements 

display: inline-flex;

Reason: Because the width of the child element (view) whose class is bodyBox is the same as that of scroll-view, setting it to display:flex; does not work (ie: scroll-view does not overflow, so padding does not work)

<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>

 Solution 2

Instead of using scroll-view, change to  overflow-x: scroll + flex implementation

overflow-x: scroll;

The disadvantage is that scroll bars appear when sliding, and you need to manually remove the scroll bars with 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>

The effect is as follows: