微信小程序 轮播图 和 横向拉动 可直接套用

<!-- 轮播图  -->
<swiper indicator-dots="true" class="swiper">
    <swiper-item>
      <image src="../images/1.jpg" class="slide-image" mode="aspectFill" />
    </swiper-item>
    <swiper-item>
      <image src="../images/2.jpg" class="slide-image" mode="aspectFill" />
    </swiper-item>
</swiper>


.slide-image {
  width: 750rpx;
  height: 300rpx;
}

.swiper {
  height: 300rpx;
  width: 100%;
}

.swiper image {
  height: 100%;
  width: 100%;
}

　　

<!-- 横向拉动 横幅 -->
<scroll-view class="scroll-view_H" scroll-x="true" style="width: 100%">
        <view class="scroll-view-item_H">1</view>
        <view class="scroll-view-item_H">2</view>
        <view class="scroll-view-item_H">3</view>
        <view class="scroll-view-item_H">4</view>
</scroll-view>

.scroll-view_H{
  white-space: nowrap;
}
.scroll-view-item_H{
  display: inline-block;
  width: 100%;
  height: 200px;
}

 

转载于:https://www.cnblogs.com/panlaixing/p/8709733.html