微信小程序的scroll-view

微信小程序的scroll-view

scroll-x, scroll-y 必须设置一个， 没有默认值

scroll-x:

• scroll-view的样式表要包含 white-space: nowrap; 否则内部的元素回自动换行

• 每一个item的view需要设置： display: inline-block

scroll-y:

• 需要设置高度

wxml代码：

<scroll-view scroll-y class="scroll-view_V">
  <view class="item item_V"></view>
  <view class="item item_V"></view>
  <view class="item item_V"></view>
  <view class="item item_V"></view>
  <view class="item item_V"></view>
  <view class="item item_V"></view>
</scroll-view>
<scroll-view  class="scroll-view_H" scroll-x>
  <view class="item item_H"></view>
  <view class="item item_H"></view>
  <view class="item item_H"></view>
  <view class="item item_H"></view>
  <view class="item item_H"></view>
  <view class="item item_H"></view>
  <view class="item item_H"></view>
</scroll-view>

wxss代码：

.scroll-view_V {
    height: 300rpx;
}

.scroll-view_H {
    white-space: nowrap;
}

.item {
    width: 200rpx;
    height: 200rpx;
    margin: 20rpx;
    background: grey;
}

.item_H {
    display: inline-block;
}