微信小程序scroll-view橫向滾共不生效

<view class="a-scroll">
      <scroll-view scroll-x class="my-scroll">
        <view id="img1" class="s-item">
          <image src="../image/timg.jpg"></image>
        </view>
        <view id="img2" class="s-item">
          <image src="../image/戰(zhàn)狼.jpg"></image>
        </view>
        <view id="img3" class="s-item">
          <image src="../image/戰(zhàn)狼2.jpg"></image>
        </view>
      </scroll-view>  
    </view>

css文件要求

一定要將scroll-view容器設置寬度,并設置white-space: nowrap;
一定要將scroll-view容器的每一項都設置寬度和display:inline-block

.a-scroll{
  width: 100%;
  height: 300rpx;
}
.my-scroll{
  width: 100%;
  white-space: nowrap; 
}
.s-item{
  width: 100%;
  display: inline-block;
}
.a-scroll image{
  width: 100%;
  height: 300rpx;
}