2025年微信小程序入门学习，借助云开发动态更换swiper图片数据，小程序轮播图动态更新

科技前沿 • 2025-01-08 16:31 • 阅读 68

大家好，我是讯享网，很高兴认识大家。

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

其实思路很简单

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

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

老规矩，先看效果图

讯享网

下面来教下大家实现步骤

一，首先在页面中定义swiper

代码如下

<!--pages/index/index.wxml--> <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>

讯享网

二，给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轮播图数据动态替换的功能了。是不是很简单。

源码我已经放到了网盘里，有需要的可以留言或者加老师微信获取。