微信小程序---左右滑动（图片列表）

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u012054869/article/details/88533516

index.wxml:

<view class="scroll_box" >    
    <scroll-view class="scroll-view_x" scroll-x style="width: auto;overflow:hidden;">
      <view class="item_list">
          <image src="../image/1.png" class="item_book_img" mode="widthFix"></image>
          <view class='title'>标题1</view>
      </view>
      <view class="item_list">
          <image src="../image/2.png" class="item_book_img" mode="widthFix"></image>
          <view class='title'>标题2</view>
      </view>
      <view class="item_list">
          <image src="../image/3.png" class="item_book_img" mode="widthFix"></image>
          <view class='title'>标题3</view>
      </view>
      <view class="item_list">
          <image src="../image/4.png" class="item_book_img" mode="widthFix"></image>
          <view class='title'>标题4</view>
      </view>
    </scroll-view>
</view>

index.wxss:

.scroll_box {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  margin-bottom: 40rpx;
}
.scroll-view_x {
  padding-left:30rpx;
}

.item_list {
  width: 420rpx;
  height: auto;
  margin-right: 15rpx;
  display: inline-block;
}

.item_list .title {
  font-size: 26rpx;
  color: #777;
  text-indent: 10rpx;
}

.item_book_img {
  width: 420rpx;
}