微信小程序視圖容器(swiper)組件創(chuàng)建輪播圖
更新時間：2022年04月07日 12:41:28 作者：Crazy Struggle
這篇文章主要為大家詳細介紹了微信小程序視圖容器（swiper）組件創(chuàng)建輪播圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文為大家分享了微信小程序swiper組件創(chuàng)建輪播圖的具體代碼，供大家參考，具體內(nèi)容如下
一、視圖容器（Swiper）
1、swiper：滑塊視圖容器
二、swiper應(yīng)用
1、頁面邏輯（index.js）
Page({
data: {
imgUrls: [
{
link: '/pages/index/index',
url: '/images/001.jpg'
}, {
link: '/pages/list/list',
url: '/images/002.jpg'
}, {
link: '/pages/list/list',
url: '/images/003.jpg'
}
],
indicatorDots: true, //小點
indicatorColor: "white",//指示點顏色
activeColor: "coral",//當前選中的指示點顏色
autoplay: false, //是否自動輪播
interval: 3000, //間隔時間
duration: 3000, //滑動時間
}其中 imgUrls 是我們輪播圖中將要用到的 圖片地址和 跳轉(zhuǎn)鏈接
indicatgorDots 是否出現(xiàn)焦點
autoplay 是否自動播放
interval 自動播放間隔時間
duration 滑動動畫時間
2、頁面結(jié)構(gòu)（index.wxml）
<!--輪播圖-->
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" indicator-color="{{indicatorColor}}"
indicator-active-color="{{activeColor}}">
<block wx:for="{{imgUrls}}">
<swiper-item>
<navigator url="{{item.link}}" hover-class="navigator-hover">
<image src="{{item.url}}" class="slide-image" width="355" height="200" />
</navigator>
</swiper-item>
</block>
</swiper>注意：swiper 千萬不要在外面 加上任何標簽 例如 <view> 之類的 ，如果加了可能會導致輪播圖出不來
3、頁面樣式(index.wxss)
/*輪播圖*/
.slide-image {
width: 100%;
}三、小程序效果圖
趕快動手實踐就可以看到如圖所示效果圖：
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript實現(xiàn)樓梯滾動特效(jQuery實現(xiàn))
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)樓梯滾動特效，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了layui在表格中嵌入上傳按鈕并修改上傳進度條的實例,本文給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-07-07
今天小編就為大家分享一篇關(guān)于JavaScript常用工具方法封裝，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-02-02
腳本吧 - 幻宇工作室用到j(luò)s,超強推薦base.js
腳本吧 - 幻宇工作室用到j(luò)s,超強推薦base.js...2006-12-12
JavaScrip如何安全使用Payment Request API詳解
這篇文章主要為大家介紹了JavaScrip如何安全使用Payment Request API詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
本文主要給大家分享一下在編寫JavaScript代碼的時候存在的一些方法和技巧，雖然有時候條條大路都通向羅馬，但是也許總會有那么一條最短的路徑可走。希望通過以下幾點JavaScript技巧讓大家的代碼“化繁為簡，化簡為精”2017-05-05
js實現(xiàn)七夕表白彈幕效果 jQuery實現(xiàn)彈幕技術(shù)
這篇文章主要介紹了js實現(xiàn)七夕表白彈幕效果，jQuery實現(xiàn)彈幕技術(shù)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
下面小編就為大家?guī)硪黄?0行JS代碼實現(xiàn)網(wǎng)頁刮刮樂效果。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
詳解JavaScript中Promise的原理與應(yīng)用
Promise是JavaScript中的一個重要概念，也是現(xiàn)代JavaScript開發(fā)中必不可少的一部分，本文主要介紹了Promise的實現(xiàn)原理、使用方法及常見應(yīng)用場景，需要的可以收藏一下2023-06-06
js中onclick和addEventListener的區(qū)別
本文對javascript中onclick事件處理的方法和addEventListener監(jiān)聽器進行講解,具有一定的參考價值,感興趣的可以了解一下2023-08-08