JavaScript中自定義swiper組件詳解
更新時間：2021年08月24日 15:43:28 作者：海轟Pro
這篇文章主要介紹了微信小程序 swiper組件輪播圖詳解及實例的相關(guān)資料,需要的朋友可以參考下，希望能給你帶來幫助
效果展示
組件設(shè)置
步驟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表示組件的位置 這里根據(jù)自己實際設(shè)置的位置關(guān)系進行替換即可
步驟2
在頁面的wxml頁面中，使用組件代碼
<custom-swiper imgUrls="{{carouselImgUrls}}" />
carouselImgUrls
類型：數(shù)組作用：用于存儲輪播圖圖片的地址（網(wǎng)絡(luò)地址 or 本地地址）
步驟3
在頁面的js文件的data中，添加carouselImgUrls變量
data: {
carouselImgUrls: [
/*
圖片的個數(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)文章
小程序中實現(xiàn)獲取全部數(shù)據(jù)的圖文教程
最近在開發(fā)中遇到了一個需求,需要獲取小程序的全部數(shù)據(jù),所以這篇文章主要給大家介紹了關(guān)于小程序中實現(xiàn)獲取全部數(shù)據(jù)的相關(guān)資料,需要的朋友可以參考下2022-11-11
利用JavaScript實現(xiàn)春節(jié)倒計時效果(移動端和PC端)
這篇文章主要介紹了通過Html+Css+js如何實現(xiàn)春節(jié)倒計時效果，本文同時介紹了移動端和PC端兩種效果，感興趣的同學可以跟隨小編一起動手試試2022-01-01
JS實現(xiàn)屏蔽網(wǎng)頁右鍵復制及ctrl+c復制的方法【2種方法】
這篇文章主要介紹了JS實現(xiàn)屏蔽網(wǎng)頁右鍵復制及ctrl+c復制的方法,結(jié)合實例形式分析了2種比較常用的屏蔽復制功能的技巧,需要的朋友可以參考下2016-09-09
JS+CSS實現(xiàn)網(wǎng)頁加載中的動畫效果
這篇文章主要為大家詳細介紹了JS+CSS實現(xiàn)網(wǎng)頁加載中的動畫效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
這篇文章主要介紹了微信小程序自定義頂部組件customHeader的相關(guān)知識，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-06-06
這篇文章主要為大家介紹了如何通過JavaScript模擬實現(xiàn)京東的快遞單號查詢效果，文中的示例代碼講解詳細，感興趣的小伙伴可以動手試一試2022-03-03
JavaScript如何動態(tài)監(jiān)聽DOM元素高度詳解
這篇文章主要為大家詳細介紹了JavaScript如何動態(tài)監(jiān)聽DOM元素高度，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-07-07
這篇文章主要介紹了Javascript模仿淘寶信用評價功能實現(xiàn)方法,以完整實例形式分析了JavaScript響應(yīng)鼠標事件動態(tài)改變頁面元素的相關(guān)技巧,并附帶了完整的實例代碼供讀者下載參考,需要的朋友可以參考下2015-11-11
這篇文章主要介紹了JS實現(xiàn)針對給定時間的倒計時功能,結(jié)合具體實例形式分析了javascript日期時間的正則判定與動態(tài)運算相關(guān)操作技巧,需要的朋友可以參考下2017-04-04
js有趣的非空判斷函數(shù) + ?? 實現(xiàn)
本文介紹了JS中空值合并操作符??的用法,包括如何使用它來判斷數(shù)據(jù)是否為“合法數(shù)據(jù)”,即非空字符串、非undefined和非null,下面就一起來了解一下,感興趣的可以了解一下2024-09-09