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

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qiushi_1990/article/details/97783951

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

其实思路很简单

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

我们这里的数据获取,可以自己服务器后台配置图片资源,也可以借助云开发配置图片资源。今天我们就把图片资源配置在云开发上。然后动态的请求到这些图片,显示到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>

这里的代码,我就不做解释了,大家可以看官方文档
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(备注小程序)

展开阅读全文

没有更多推荐了,返回首页