在上一篇《H5移动端css实现向右横向滚动功能》我们已经介绍过横向滚动的发展史，那么小程序也可以用h5的代码实现横向向右滚动的效果，这个方法就不再啰嗦，能实现，这篇文章说一下第二种微信小程序自带的方法：scroll-view标签。

那么怎用小程序的方式实现下图的效果呢？

微信小程序实现向右横向滚动功能的方法-QUI-Notes

1.wxml代码： 

<scroll-view class="srcolbox" scroll-x	 scroll-with-animation='true'>
  <view class="item">1</view>
  <view class="item">2</view>
  <view class="item">3</view>
  <view class="item">4</view>
  <view class="item">5</view>
</scroll-view>

2.wxss代码： 

.srcolbox {
  width: 100%;
  height: 280rpx;
  white-space: nowrap;
  margin-top: 25px;
}

.item {
  width: 40%;
  line-height: 280rpx;
  display: inline-block;
  background-color: #999;
  margin-right: 30rpx;
  text-align: center;
}

.item:nth-of-type(2n) {
  background-color: #666;
}

3.实现最终效果：

微信小程序实现向右横向滚动功能的方法-QUI-Notes

以上就是实现微信小程序横向向右滚动的方式了，如果有其他的方法，也可以留言，大家互相学习交流！