小程序-轮播图的开发

1、wxml文件

<!-- 1 轮播 -->
<swiper class="slides" 
  autoplay="{{slides.length > 1}}"
  indicator-dots="{{slides.length > 1}}" 
  indicator-color="#bcc0c9" 
  indicator-active-color="#3a4861"
  next-margin="0rpx"
  previous-margin="0rpx"
  display-multiple-items="1"
  interval="5000"
  duration="1000"
  circular="true"
  current="1"
  bindchange="showSwiper">
  <swiper-item wx:for="{{slides}}" wx:key="id">
    <navigator wx:if="{{item.link}}" url="{{item.link}}">
      <!-- mode="aspectFit" 保持纵横比缩放图片，使图片的长边能完全显示出来-->
      <image src="{{item.image}}" mode="aspectFit" />
    </navigator>
    <image wx:else src="{{item.image}}" mode="aspectFit" />
  </swiper-item>
</swiper>

关键点：

• 移动端，一般会给组件swiper一个高度，内部自适应这个高度
• 有时候需要点击图片跳转到其他界面，这时候需要根据link值给image组件包裹一层navigator标签
• 轮播图片的缩放模式，可以使用mode属性进行设置
• 当前所在滑块的 index改变时触发 change 事件

2、wxss文件

/* 一般给一个固定的高度，内部自适应这个高度 */
.slides {
  height: 380rpx;
}

.slides navigator,
.slides image {
  min-width: 100%;
  height: 100%;
}

3、js文件

Page({
  data: {
    slides: [],
    categories: []
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    let slides = [
      { id: 1, image: "/assets/dlrb-01.jpg", link: "/pages/list/list?cat=10" },
      { id: 2, image: "/assets/dlrb-02.jpg", link: "/pages/list/list?cat=12" },
      { id: 3, image: "/assets/dlrb-03.jpg", link: "" },
      { id: 4, image: "/assets/dlrb-04.jpg", link: "" }
    ]

    this.setData({ slides: slides })
  },
  //current 改变时会触发 change 事件
  showSwiper(e) {
    console.log(e.detail)
  }
})