JS中swiper組件的功能介紹

本篇內容主要講解“JS中swiper組件的功能介紹”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“JS中swiper組件的功能介紹”吧!

目錄

• 效果展示

• 組件設置

• 步驟1

• 步驟2

• 步驟3

• 使用組件

• 步驟1

• 步驟2

• 步驟3

• 總結

效果展示

組件設置

步驟1

在pages目錄下，新建文件夾components

步驟2

在components下建立新文件夾swiper

在swiper目錄下，新建4個文件，分別為

• swiper.

• jsswiper.

• jsonswiper.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.jpg",
      "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"
    ],
  },

最后只需要編譯代碼 就可以得到效果圖了

到此，相信大家對“JS中swiper組件的功能介紹”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！