使用微信小程序拿到接口中的轮播图数据

今天来实现一下微信小程序从接口中拿到数据渲染轮播图，原理很简单，一起往下看吧

使用官方给的组件，swiper 滑块轮播，要配合swiper-item一起使用！！

官方文档：swiper | 微信开放文档 (qq.com)

和vue中v-for循环特别相似

上代码：

在index.js中写上接口请求，这里我使用到的是get

Page({
  data: {
    list:""
  },
  onLoad:function(options){
    let that = this;
        wx.request({
      url: '接口',
      data:{},
      method:"GET",
      header:{
        "content-type":"application/json"
      },
      success:function(res){
        console.log(res.data)
        that.setData({
          list: res.data.ggtop,
        })
      },
    })
  }
});
 

之后在index.wxml中写：

<view class="banner">
  <swiper  class="banners" circular="true" indicator-dots="{{ true }}" autoplay="true" interval="3000">
  <block >
    <swiper-item  wx:for="{{ list }}" wx:key="index">
<image src="{{item.photo}}"></image>
    </swiper-item>
  </block>

  </swiper>
</view>

wx：for 可以自动帮我们去编译，所以直接写{{item.数据名称}}就可以了