菜鸟学习小程序之轮播图

其实小程序的轮播图比PC端的简单多了，没有那么多的js代码跟逻辑，但是对于新手的我来说还是踩了很多坑。

效果图：

前端代码：

<!--轮播图  -->
    <view class='nav'>
      <swiper class="swiper" indicator-dots="true" autoplay="true" interval="5000" duration="500"circular="true">
        <block wx:for="{{img}}" wx:key="item"> <!-- 循环数据-->
        <swiper-item><image src='http://www.huiyin.com{{item.value}}' class='img'></image></swiper-item>
       </block>  
      </swiper >

样式代码：

.img{width: 100%;height: 100%;} .nav,.swiper{width: 100%;}

js代码：

  var that = this //js的作用域问题
    //获取轮播图
    wx.request({
      url: '接口地址',
      method: "get",
      success: function (e) {
        var data = e.data
        if (data.code == 200) {
          that.setData({
            img:data.data
          })
        }
      }
    })

官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html