JavaScript中自定義swiper組件詳解

更新時(shí)間：2021年08月24日 15:43:28 作者：海轟Pro

這篇文章主要介紹了微信小程序 swiper組件輪播圖詳解及實(shí)例的相關(guān)資料,需要的朋友可以參考下，希望能給你帶來幫助

效果展示

在這里插入圖片描述

組件設(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組件的頁面的json文件中引入組件

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

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

步驟2

在頁面的wxml頁面中，使用組件代碼

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

carouselImgUrls

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

步驟3

在頁面的js文件的data中，添加carouselImgUrls變量

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

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

在這里插入圖片描述

總結(jié)

本篇文章就到這里了，希望能給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容！

您可能感興趣的文章:

相關(guān)文章

小程序中實(shí)現(xiàn)獲取全部數(shù)據(jù)的圖文教程
最近在開發(fā)中遇到了一個(gè)需求,需要獲取小程序的全部數(shù)據(jù),所以這篇文章主要給大家介紹了關(guān)于小程序中實(shí)現(xiàn)獲取全部數(shù)據(jù)的相關(guān)資料,需要的朋友可以參考下
2022-11-11
利用JavaScript實(shí)現(xiàn)春節(jié)倒計(jì)時(shí)效果(移動(dòng)端和PC端)
這篇文章主要介紹了通過Html+Css+js如何實(shí)現(xiàn)春節(jié)倒計(jì)時(shí)效果，本文同時(shí)介紹了移動(dòng)端和PC端兩種效果，感興趣的同學(xué)可以跟隨小編一起動(dòng)手試試
2022-01-01
JS實(shí)現(xiàn)屏蔽網(wǎng)頁右鍵復(fù)制及ctrl+c復(fù)制的方法【2種方法】
這篇文章主要介紹了JS實(shí)現(xiàn)屏蔽網(wǎng)頁右鍵復(fù)制及ctrl+c復(fù)制的方法,結(jié)合實(shí)例形式分析了2種比較常用的屏蔽復(fù)制功能的技巧,需要的朋友可以參考下
2016-09-09
JS+CSS實(shí)現(xiàn)網(wǎng)頁加載中的動(dòng)畫效果
這篇文章主要為大家詳細(xì)介紹了JS+CSS實(shí)現(xiàn)網(wǎng)頁加載中的動(dòng)畫效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-10-10
微信小程序自定義頂部組件customHeader的示例代碼
這篇文章主要介紹了微信小程序自定義頂部組件customHeader的相關(guān)知識(shí)，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2020-06-06
利用JavaScript模擬京東快遞單號(hào)查詢效果
這篇文章主要為大家介紹了如何通過JavaScript模擬實(shí)現(xiàn)京東的快遞單號(hào)查詢效果，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以動(dòng)手試一試
2022-03-03
JavaScript如何動(dòng)態(tài)監(jiān)聽DOM元素高度詳解
這篇文章主要為大家詳細(xì)介紹了JavaScript如何動(dòng)態(tài)監(jiān)聽DOM元素高度，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2022-07-07
Javascript模仿淘寶信用評(píng)價(jià)實(shí)例(附源碼)
這篇文章主要介紹了Javascript模仿淘寶信用評(píng)價(jià)功能實(shí)現(xiàn)方法,以完整實(shí)例形式分析了JavaScript響應(yīng)鼠標(biāo)事件動(dòng)態(tài)改變頁面元素的相關(guān)技巧,并附帶了完整的實(shí)例代碼供讀者下載參考,需要的朋友可以參考下
2015-11-11
JS實(shí)現(xiàn)針對給定時(shí)間的倒計(jì)時(shí)功能示例
這篇文章主要介紹了JS實(shí)現(xiàn)針對給定時(shí)間的倒計(jì)時(shí)功能,結(jié)合具體實(shí)例形式分析了javascript日期時(shí)間的正則判定與動(dòng)態(tài)運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下
2017-04-04
js有趣的非空判斷函數(shù) + ?? 實(shí)現(xiàn)
本文介紹了JS中空值合并操作符??的用法,包括如何使用它來判斷數(shù)據(jù)是否為“合法數(shù)據(jù)”,即非空字符串、非undefined和非null,下面就一起來了解一下,感興趣的可以了解一下
2024-09-09