21:轮播图

components/m-swiper.wxml：

<swiper class="swiper" autoplay indicator-dots  indicator-active-color="#ff5777"  
circular
interval="3000">
  <block wx:for="{{list}}" wx:key="index">
    <swiper-item class="swiper-item">
     <image src="{{item}}" mode="widthFix"/>
    </swiper-item>
  </block>
</swiper>

interval：图片切换的时间
autoplay:自动切换

components/m-swiper.js：

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    list:{
      type:Array,
      value:[]
    }
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {

  }
})

components/m-swiper.json：

{
  "component": true,
  "usingComponents": {}
}

component/m-swiper/m-swiper.wxss：

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

把m-swiper做成组件

test.json:

<!--轮播图 m-swiper-->
<m-swiper list="{{banners}}"></m-swiper>

test.js:

Page({

  /**
   * 页面的初始数据
   */
  data: {
    banners:''
  },


  /**
   * 生命周期函数--监听页面加载 这个onload指的是每次刷新的时候
   * that 指向的success 所有需要 var that = this
   */
  onLoad: function (options) {
    var that = this;
    //轮播图
    const banners=[
      'https://img12.360buyimg.com/da/jfs/t1/64942/6/10328/80741/5d7e487bE321598a3/8f6f08ad6f659916.jpg',
      'https://img11.360buyimg.com/da/jfs/t1/83953/12/10463/95928/5d7e480dE254e4091/03b53610071cbcce.jpg',
      'https://img12.360buyimg.com/da/jfs/t1/69850/2/10309/68489/5d7e4779Ea0afd37c/939073545ae7c55b.jpg',
      'https://img13.360buyimg.com/da/jfs/t1/40938/3/14667/84295/5d79afb6E01c341bb/2ee1208bc35b605d.jpg'
            ]
    //轮播图设置数据
    that.setData({
      banners: banners
    })
  },

test.json:

{
  "usingComponents": {
    "m-swiper":"/pages/component/m-swiper/m-swiper"
  },
}

这里components/m-swiper.js 中的list要和test.json中list属性名要一致

效果：