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