微信小程序实现轮播图

<!--pages/demo4/demo4.wxml-->
<text>pages/demo4/demo4.wxml</text>
<!-- swiper  滑块视图容器
   直接子组件只能是swiper-item
   一个swiper-item  就是一个轮播页面
   swiper 的宽度100%  高度150
   image 的宽度是320*240
-->
<!-- <swiper>
  <swiper-item>
    1
  </swiper-item>
  <swiper-item>
    2
  </swiper-item>
  <swiper-item>
    3
  </swiper-item>
</swiper> -->
<swiper
indicator-dots="{{true}}"
indicator-color="#000"
indicator-active-color="#f00"
autoplay="{{true}}"
interval="1000"
circular="{{true}}"
vertical="{{false}}"
previous-margin="50px"
next-margin="50px"
easing-function="linear"
current="2"
bindchange="_change"
>
  <swiper-item>
    <image src="../../images/0.jpg.dpg"></image>
  </swiper-item>
  <swiper-item>
    <image src="../../images/1.jpg.dpg"></image>
  </swiper-item>
  <swiper-item>
    <image src="../../images/2.jpg.dpg"></image>
  </swiper-item>
</swiper>

/* pages/demo4/demo4.wxss */
image{
  width: 100%;
  height: 100%;
}

// pages/demo4/demo4.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
  },
  _change(e){
    console.log(e.detail.current)
    console.log(1234)
    // 异步调用
    this.setData({
    })
  }
})