微信小程序入門學習，藉助雲開發動態更換swiper圖片數據，小程序輪播圖動態更新

最近在教大家入門小程序開發時，有同學不知道怎麼樣動態的更新小程序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（備註小程序）