JS中swiper組件的功能介紹

本篇內(nèi)容主要講解“JS中swiper組件的功能介紹”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“JS中swiper組件的功能介紹”吧!

目錄

• 效果展示

• 組件設(shè)置

• 步驟1

• 步驟2

• 步驟3

• 使用組件

• 步驟1

• 步驟2

• 步驟3

• 總結(jié)

效果展示

組件設(shè)置

步驟1

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

步驟2

在components下建立新文件夾swiper

在swiper目錄下，新建4個(gè)文件，分別為

• swiper.

• jsswiper.

• jsonswiper.wxml

• swiper.wxss

各文件位置示意圖如下：

注：此時(shí)編譯會(huì)報(bào)錯(cuò) 錯(cuò)誤顯示在json那里 先不用管 后面把代碼復(fù)制粘貼上去再編譯就好了

步驟3

分別把下面代碼復(fù)制進(jìn)swiper目錄中的四個(gè)文件

swiper.js

swiper.json

swiper.wxml

swiper.wxss

使用組件

步驟1

在需要使用swiper組件的頁(yè)面的json文件中引入組件

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

注意： …/components/swiper/swiper表示組件的位置 這里根據(jù)自己實(shí)際設(shè)置的位置關(guān)系進(jìn)行替換即可

步驟2

在頁(yè)面的wxml頁(yè)面中，使用組件代碼

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

carouselImgUrls

類(lèi)型：數(shù)組作用：用于存儲(chǔ)輪播圖圖片的地址（網(wǎng)絡(luò)地址 or 本地地址）

步驟3

在頁(yè)面的js文件的data中，添加carouselImgUrls變量

  data: {
    carouselImgUrls: [
    /*
    圖片的個(gè)數(shù)自定義
    圖片來(lái)源：圍脖
	作者：少女兔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"
    ],
  },

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

到此，相信大家對(duì)“JS中swiper組件的功能介紹”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢(xún)，關(guān)注我們，繼續(xù)學(xué)習(xí)！