微信小程序輪播圖swiper代碼詳解
更新時(shí)間：2020年12月01日 11:07:09 作者：大個(gè)子痞老板
swiper組件是滑塊視圖容器，主要用來(lái)做圖片輪播。這篇文章主要給大家介紹了關(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%;
}
記住：
圖片跟背景顏色思路一樣
到此這篇關(guān)于微信小程序輪播圖swiper代碼的文章就介紹到這了,更多相關(guān)微信小程序輪播圖swiper代碼內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
javascript-hashchange事件和歷史狀態(tài)管理實(shí)例分析
這篇文章主要介紹了javascript-hashchange事件和歷史狀態(tài)管理,結(jié)合實(shí)例形式分析了javascript-hashchange基本功能、原理及歷史狀態(tài)管理相關(guān)操作技巧,需要的朋友可以參考下2020-04-04
JavaScript實(shí)現(xiàn)簡(jiǎn)單的拖拽效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)單的拖拽效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
用js實(shí)現(xiàn)table單元格高寬調(diào)整,兼容合并單元格(兼容IE6、7、8、FF)實(shí)例
用js實(shí)現(xiàn)table單元格寬度和高度調(diào)整,有合并單元格也可以的.兼容IE6,7,8以及FF,附上代碼css,html,js三部份，有需要的朋友可以參考一下2013-06-06
JavaScript通過(guò)join函數(shù)連接數(shù)組里所有元素的方法
這篇文章主要介紹了JavaScript通過(guò)join函數(shù)連接數(shù)組里所有元素的方法,實(shí)例分析了javascript中join函數(shù)的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
基于JS實(shí)現(xiàn)禁止查看源碼及獲取鍵盤的按鍵值
這篇文章主要介紹了基于JS實(shí)現(xiàn)禁止查看源碼及獲取鍵盤的按鍵值,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-02-02
Bootstrap模態(tài)框水平垂直居中與增加拖拽功能
最近開發(fā)一個(gè)CMS系統(tǒng)使用上了Bootstrap，在開發(fā)一個(gè)添加某些選項(xiàng)時(shí)，打算彈出一個(gè)模態(tài)框，但是發(fā)現(xiàn)，模態(tài)框不會(huì)垂直居中到屏幕上，而是在屏幕上方,通過(guò)查閱資料才解決此問(wèn)題，下面小編給大家分享解決思路2016-11-11
js實(shí)現(xiàn)同一個(gè)頁(yè)面,多個(gè)enter事件綁定的示例
今天小編就為大家分享一篇js實(shí)現(xiàn)同一個(gè)頁(yè)面,多個(gè)enter事件綁定的示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)聊天室功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
還是掛馬問(wèn)題，這段時(shí)間，我漸漸感到壓力，頭大，通過(guò)QQ或MSN加我的人越來(lái)越多，我最近自己的工作本來(lái)就忙得不亦樂(lè)乎。哎，想想，還是要抽空來(lái)來(lái)幫幫大家。2008-03-03
uni-app是一個(gè)使用 Vue.js 開發(fā)所有前端應(yīng)用的框架,開發(fā)者編寫一套代碼,可發(fā)布到iOS、Android、H5、以及各種小程序（微信/支付寶/百度/頭條/QQ/釘釘）等多個(gè)平臺(tái),這篇文章主要給大家介紹了關(guān)于利用uni-app生成微信小程序的踩坑記錄,需要的朋友可以參考下2022-04-04