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