微信小程序-scroll-view左右滑动

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

效果：

wxml页面：

  <view class="section section_gap">
    <scroll-view class="scroll-view_H" scroll-x="true">
      <view class="scroll-view-item_H" wx:for="{{hotList}}" wx:key="{{item}}">
        <image src="{{item.pic}}"class="scroll-image"/>     
      </view> 
    </scroll-view>
  </view>

对应的wxss:

.section{
  width: 100%;
  margin-top:10px;
}

.scroll-view_H{
  height:210rpx;
  display: flex;
  width: 100%;
  white-space: nowrap;

}
.scroll-view-item_H{
  width:300rpx;
  height:210rpx;
  margin-right:5rpx;
  display: inline-block;

}
.scroll-image{
  width:300rpx;
  height:210rpx;
  display: block;
  border-radius: 10px
}

对应的JS：在data中定义对象

 hotList: [
      {
        pic: "../../images/lunbo/1.jpg",
      },
      {
        pic: "../../images/lunbo/2.jpg",
      },
      {
        pic: "../../images/lunbo/3.jpg",
      },
      {
        pic: "../../images/lunbo/4.jpg",
      }
    ],