微信小程序学习：使用scroll-view完成图片横向滚动

如图，需求很简单，要求使用图片列表横向滑动显示出来。

思路：

横向滑动的控件，大家很容易就能想到scroll-view，该案例也是通过scroll-view来实现的。

代码：

1、wxml

<scroll-view scroll-x="true"> 
          <view class="ad_img_item">
            <view wx:for="{{item.imgs}}" wx:key="index"  data-idx="{{index}}" >
              <image class="item_img" mode='aspectFill' src="{{item.img}}"></image>
            </view>
          </view>
        </scroll-view>

2、wxss

.ad_img_item{
  width: 100%;
  height: 200rpx;
  text-align: center;
  display: flex;
}
.item_img{
  width: 200rpx;
  height: 200rpx;
  padding-right: 20rpx;
}