小程序轮播图开发步骤

注：本篇轮播图是在首页home上进行开发
当创建好项目之后可以进行轮播图开发，而且一般轮播图都会出现在每个项目中

在home.js中，通过onLoad获取轮播图数据，并通过fetchSwiperData函数的wx.request来获取url地址

@TOC初步获取后台数据

data: {
    // 轮播图数据
    swiperData: []
    }

 onLoad() {
    // 获取轮播图数据
    this.fetchCatesData()}

 fetchCatesData() {
    wx.request({
      url: '后台提供的链接',
      //成功的回调
      success: res => {
      	//把获取到的后台数据赋值给swiperData，用于随后的数据渲染
       	this.setData({
         	swiperData: res.data.message
		    })
        })
      },
      //失败的回调 
      fail: err => {
        console.log('err:', err)
      }
    })
  }

这时候控制台的network会返回一个数据

并打印出数据

此时并没有进行页面赋值，所以检查数据最好是用控制台的AppData进行查看，如果展示出swiperData相关的数据，证明已经获取到了

在页面上渲染轮播图@TOC

<swiper circular indicator-dots autoplay>
  <swiper-item wx:for="{{swiperData}}" wx:key='index'>
  <!-- 跳转到url的页面，循环对应的页面 -->
    <navigator url="{{item.navigator_url}}">
      <image src="{{item.image_src}}" />
    </navigator>
  </swiper-item>
</swiper>

注意：swiper容器里只可以放置swiper-item组件，for循环和key前面都需要加wx:
circular 、indicator-dots、 autoplay 分别表示：衔接滑动、显示面板指示点、自动切换
在swiper-item中将swiperData数据循环出来
在图片外面添加navigator并加入数据所给的url，则使对应的跳转不同的页面去
image 图片动态获取对应的图片即可
图片wxss样式就不再说明