微信小程序scroll-view

<!--纵向滚动-->
<scroll-view class="myScroll" scroll-y>
  <view class="row">1</view>
  <view class="row">2</view>
  <view class="row">3</view>
  <view class="row">4</view>
  <view class="row">5</view>
  <view class="row">6</view>
  <view class="row">7</view>
  <view class="row">8</view>
</scroll-view>


<!--横向滚动-->
<scroll-view class="myScroll_h" scroll-x>
  <view class="row_h">1</view>
  <view class="row_h">2</view>
  <view class="row_h">3</view>
  <view class="row_h">4</view>
  <view class="row_h">5</view>
  <view class="row_h">6</view>
  <view class="row_h">7</view>
  <view class="row_h">8</view>
</scroll-view>

 

/*纵向滚动*/
.myScroll{
  width: 100%;
  height: 220rpx;
  background: #eee;
}

.row{
  width: 220rpx;
  height: 220rpx;
  background-color:palegreen;
  margin-right: 10rpx;

}

/*横向滚动*/
.myScroll_h{
  width: 100%;
  height: 220rpx;
  background: #eee;
  white-space:nowrap;
}

.row_h{
  width: 220rpx;
  height: 220rpx;
  background-color:palegreen;
  margin-right: 10rpxs;
  display: inline-block;
}

 

.myScroll .row_h:last-child{
  margin-right: 0;
}