微信小程序輪播圖swiper代碼詳解
更新時(shí)間：2020年12月01日 11:07:09 作者：大個(gè)子痞老板
swiper組件是滑塊視圖容器，主要用來做圖片輪播。這篇文章主要給大家介紹了關(guān)于微信小程序輪播圖swiper代碼的相關(guān)資料,需要的朋友可以參考下
微信小程序自定義swiper
滑塊視圖容器。其中只可放置swiper-item組件，否則會(huì)導(dǎo)致未定義的行為。
先在index.wxml中寫
style=“background:{{item}}” 報(bào)錯(cuò)不要管，不影響頁(yè)面布局
<view class="container">
<swiper class="swiper1"
indicator-dots="{{indicatorDots}}" 是否顯示面板指示點(diǎn)
autoplay="{{autoplay}}" 是否自動(dòng)切換
interval="{{interval}}" 自動(dòng)切換時(shí)間間隔
duration="{{duration}}" 滑動(dòng)動(dòng)畫時(shí)長(zhǎng)
circular="{{circular}}" 是否采用銜接滑動(dòng)
indicator-active-color="#ff0099" 選中指示點(diǎn)顏色
>
<block wx:for="{{background}}" wx:key="index"> 循環(huán)遍歷數(shù)據(jù)
<swiper-item>
<view class="swiper-item" style="background:{{item}}"></view>
</swiper-item>
</block>
</swiper>
</view>
再在index.js中寫
Page({
data: {
background: ["red", "pink","yellowgreen"],
indicatorDots: true,
vertical: false,
autoplay: true,
interval: 2000,
duration: 500,
circular:true
}
})
最后在index.wxss中寫
.swiper1{
width: 100%;
height: 200px;
}
.swiper-item{
width: 100%;
height: 100%;
}
記?。?/strong>
圖片跟背景顏色思路一樣
到此這篇關(guān)于微信小程序輪播圖swiper代碼的文章就介紹到這了,更多相關(guān)微信小程序輪播圖swiper代碼內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)用戶注冊(cè)界面功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要給大家介紹了關(guān)于javascript中如何判斷類型的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用javascript具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要針對(duì)微信jssdk用法進(jìn)行匯總，通過ready接口處理成功驗(yàn)證、通過error接口處理失敗驗(yàn)證等內(nèi)容介紹，感興趣的小伙伴們可以參考一下2016-07-07
這篇文章主要介紹了微信小程序如何獲取openid及用戶信息，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-01-01
js實(shí)現(xiàn)彩色條紋滾動(dòng)條效果
本文主要介紹了js實(shí)現(xiàn)彩色條紋滾動(dòng)條效果的實(shí)例。具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-03-03
本文主要介紹了利用js定義一個(gè)導(dǎo)航條菜單的方法。具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-03-03
這篇文章主要介紹了深入淺析JavaScript中的scrollTop的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-07-07
js實(shí)現(xiàn)九宮格的隨機(jī)顏色跳轉(zhuǎn)
本篇文章主要介紹了js實(shí)現(xiàn)九宮格的隨機(jī)顏色跳轉(zhuǎn)的示例代碼，具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-02-02
很多DOM對(duì)象都有原生的事件支持，向div就有click、mouseover等事件，事件機(jī)制可以為類的設(shè)計(jì)帶來很大的靈活性，相信.net程序員深有體會(huì)。隨著web技術(shù)發(fā)展，使用JavaScript自定義對(duì)象愈發(fā)頻繁，讓自己創(chuàng)建的對(duì)象也有事件機(jī)制，通過事件對(duì)外通信，能夠極大提高開發(fā)效率2013-08-08
這篇文章主要給大家介紹了關(guān)于js獲取對(duì)象中所有屬性的四種方法,在JavaScript 中,我們可以通過不同的方法獲取對(duì)象的屬性,文中通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-09-09