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

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

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.实现最终效果:

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