微信小程序实现顶部banner

微信小程序顶部实现滚动banner

WXML文件代码

<swiper class='banner-box' indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" circular="{{circular}}" vertical="{{vertical}}" interval="{{interval}}" duration="{{duration}}" previous-margin="{{previousMargin}}px" next-margin="{{nextMargin}}px">
<block wx:for='{{bannerImages}}' wx:key='index'>
	<swiper-item>
		<image src='{{item}}' mode="widthFix" class='banner' />
	</swiper-item>
</block>
</swiper>

WXSS文件代码

.banner-box {
  margin-left: 10rpx;
  margin-right: 10rpx;
  margin-top: 5rpx;
  width: auto;
  height: 42vw;
}

.banner {
  float: left;
  width: 100%;
  height: auto;
  border-radius: 10rpx;
}

JS文件代码

Page({

  /**
   * 页面的初始数据
   */
  data: {
    // Banner数据
    bannerImages: ["1.jpg", "2.jpg(图片路径)"],
    // 是否显示面板指示点
    indicatorDots: false,
    // 滑动方向是否为纵向
    vertical: false,
    // 自动切换
    autoplay: true,
    // 采用衔接滑动
    circular: true,
    // 自动切换时间间隔
    interval: 5000,
    // 滑动动画时长0.5s
    duration: 500,
    // 前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值
    previousMargin: 0,
    // 后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值
    nextMargin: 0
  }
})

！！！

banner图片建议大小：宽1000px，高430px。