1. 程式人生 > >微信小程式 scroll-view 橫向劃不動

微信小程式 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/戰狼.jpg"></image>
        </view>
        <view id="img3" class="s-item">
          <image src="../image/戰狼2.jpg"></image>
        </view>
      </scroll-view>  
    </view>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

css檔案要求

  1. 一定要將scroll-view容器設定寬度,並設定white-space: nowrap;
  2. 一定要將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;
    }