目錄

• 效果展示
• 組http://www.cppcns.com件設定
• 步驟1
• 步驟2
• 步驟3
• 使用元件
• 步驟1
• 步驟2
• 步驟3
• 總結

效果展示

元件設定

步驟1

在pages目錄下，新建資料夾components

步驟2

在components下建立新資料夾swiper

在swiper目錄下，新建4個檔案，分別為

• swiper.
• swiper.
• jsonswiperBWwAZnK.wxml
• swiper.wxss

各檔案位置示意圖如下：

注：此時編譯會報錯 錯誤顯示在json那裡 先不用管 後面把程式碼複製貼上上去再編譯就好了

步驟3

分別把下面程式碼複製進swiper目錄中的四個檔案

swiper.js

swiper.json

swiper.wxml

swiper.wxss

使用元件

步驟1

在需要使用swiper元件的頁面的json檔案中引入元件

{
  "usingComponents": {
    "custom-swiper": "../components/swiper/swiper"
  }
}

注意： …/components/swiper/swiper表示元件的位置 這裡根據自己實際設定的位置關係進行替換即可

步驟2

在頁面的wxml頁面中，使用元件程式碼

<custom-swiper imgUrls="{{carouselImgUrls}}" />

carouselImgUrls

型別：陣列作用：用於儲存輪播圖圖片的地址（網路地址 or 本地地址）

步驟3

在頁面的js檔案的data中，新增carouselImgUrls變數

  data: {
    carouselImgUrls: [
    /*
    圖片的個數自定義
    圖片來源：圍脖
	作者：少女兔iiilass ​ ​​​​
 	侵刪
 	*/
      "https://wx1.sinaimg.cn/mw2000/7f97a73fly1gsgixv69f6j20j60j60ui.jpgBWwAZnK","https://wx1.sinaimg.cn/mw2000/7f97a73fly1gsgixvage4j20j60j6tah.jpg","https://wx1.sinaimg.cn/mw2000/7f97a73fly1gsgixvadfnj20j60j60uk.jpg","https://wx1.sinaimg.cn/mw2000/7f97a73fly1gsgixvdcswj20j60j6jt6.jpg","https://wx1.sinaimg.cn/mw2000/7f97a73fly1gsgixv6kmbj20j60j6dhg.jpg"
    ],},

最後只需要編譯程式碼 就可以得到效果圖了

總結

本篇文章就到這裡了，希望能給你帶來幫助，也希望您能夠多多關注我們的更多內容！