微信小程式 scroll-view 橫向劃不動
阿新 • • 發佈:2018-11-04
當是垂直滾動的時候,官網的例項即可完成
當是水平滾動的時候,注意:
<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檔案要求
- 一定要將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; }