微信小程序-制作轮播图

前言

如果能够独立做出导航栏，那么轮播图没有压力很轻松就能写出来，就是普通的请求数据，然后在轮播图的image里面使用请求的数据即可

index.wxml

<view class="slider">
  <swiper circular="true" indicator-dots="true" autoplay="true" class="swiperMain">
    <swiper-item class="swiperItem" wx:for="{{list}}" wx:key="{{list}}">
      <navigator>
        <image mode="widthFix" src="{{item.pic}}"></image>
      </navigator>
    </swiper-item>
  </swiper>
</view>

index.js

Page({
  data:{

  },
  getSwiperList(){
    let that=this;
    wx.request({
      url:"http://localhost:3000/data",
      success(res){
        that.setData({
          list:res.data
        })
      }
    })
  },
  onLoad:function(){
    this.getSwiperList();
  }
})

效果