最近在教大家入门小程序开发时，有同学不知道怎么样动态的更新小程序swiper（轮播图）组件里的图片资源。今天就来给大家讲一讲如何动态替换轮播图。

其实思路很简单

1，小程序里定义swiper组件
2，动态请求swiper要显示的图片资源
3，把图片资源组装成数组，并把数据绑定到swiper轮播图组件里。

我们这里的数据获取，可以自己服务器后台配置图片资源，也可以借助云开发配置图片资源。今天我们就把图片资源配置在云开发上。然后动态的请求到这些图片，显示到swiper轮播图组件里。

老规矩，先看效果图

通过效果图可以看到我们实现了这样的效果
先是展示两个本地图片，然后动态的请求云开发里的图片数据（两个石头的图片），然后就可以动态的替换我们的swiper轮播图里的图片了。

下面来教下大家实现步骤

一，首先在页面中定义swiper

代码如下
<swiper indicator-dots=“true” autoplay=“true” indicator-color=“yellow”>
<block wx:for="{{imgUrls}}" wx:key=“item”>
<swiper-item>
<image src="{{item}}" />
</swiper-item>
</block>
</swiper>
<button bindtap=‘getImages’ type=‘primary’ class=‘btn’>云开发动态替换图片</button>

这里的代码，我就不做解释了，大家可以看官方文档
https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

二，给swiper设置图片数据。

我们这里设置数据分两种，一个是本地写死的图片数据，另外一个是请求线上动态的数据。
代码如下

// pages/index/index.js
Page({
  data: {
    imgUrls: [
      "../../images/img1.png",
      "../../images/img2.png"
    ]
  },

  getImages() {
    let that=this;
    let imgArr = [];
    wx.cloud.database().collection("images").get({
      success(res) {
        console.log("请求成功", res.data)
        let dataList = res.data;
        for (let i = 0; i < dataList.length; i++) {
          imgArr.push(dataList[i].url)
        }
        console.log("imgArr的数据", imgArr)
        that.setData({
          imgUrls: imgArr
        })
      },
      fail(res) {
        console.log("请求失败", res)
      }
    })

  }
})

我们这节的重点就是给swiper动态绑定云数据库里配置的数据。所以上面代码中的 getImages 方法就是获取云数据库里的数据，并绑定到swiper轮播图里。

三，在云开发数据库里设置动态图片数据

1，首先要创建一个images集合

2，修改images集合的权限

3，往images集合里插入数据

这样我们就成功的设置了轮播图的图片数据，这里有两个数据，就代表我swiper轮播图可以先是两个图片，你也可以添加或者删除，或者修改数据。这样等我们小程序上线后，你就可以动态的设置轮播图的图片了。

注意：我们这里用到了云开发，所以你要在app.js里做云开发环境的初始化，如果你还没有一点点云开发基础，可以看我录制的云开发视频：https://edu.csdn.net/course/detail/9604

到这里我们就成功的实现了swiper轮播图数据动态替换的功能了。是不是很简单。

源码我已经放到了网盘里，有需要的可以留言或者加老师微信获取2501902696(备注小程序)。

有任何关于小程序的问题，也可以留言