微信小程序 横向滑动图片

       在微信小程序中想要实现横向滑动图片列表这个功能，主要是依靠小程序中的scroll-view可滚动视图区域来实现，这个可以上下滚动也可以实现左右滚动，只需要设置参数就可以了，关键在于scroll-view中的参数设置，scroll-view中有参数scroll-x默认为false，表示是否支持横向滑动，并且还需要关注的就是scroll-view中的view需要横向放置即设置display:flex，flex容器中默认参数有个flex-dirextion为row表示横向放置，因此不用设置flex-direction就能实现效果了。

        接下来我们一步步来实现想要的目的，首先我们先放六张图片，然后我们使用view将这个六个image包括起来，横向放置

这个时候 当一个大的view把六张图片包含起来之后，并且设置display:flex之后图片已经能横向放置了，但是并不能左右滑动，右边的图片也不能显示，之后我们添加scroll-view，并且把scroll-x设置为true之后

  <!-- wxml中 -->
<scroll-view scroll-x="true">
  <view class="view_list">
    <view wx:for="{{[1, 2, 3, 4, 5, 6]}}" wx:key="{{index}}">
      <image class="mypic" src="../../pic/pic.jpg"></image>
      <text>第{{index}}个</text>
    </view>
  </view>
</scroll-view>

<!-- wxss中 -->
.view_list{
  width: 100%;
  height: 200rpx;
  text-align: center;
  display: flex;
}
.mypic{
  width: 200rpx;
  height: 200rpx;
}

就能发现结果图片已经能够横向滑动了， 至此已经实现了图片横向滑动的功能，其他的细节就可以随便修改了。