微信小程序 swiper組件輪播圖詳解及實例
更新時間：2016年11月16日 11:52:27 作者：dzp_coder
這篇文章主要介紹了微信小程序 swiper組件輪播圖詳解及實例的相關(guān)資料,需要的朋友可以參考下
微信小程序 swiper組件輪播圖
照著開發(fā)文檔嘗試,總是能有所收獲.之前做Android開發(fā),做個輪播圖并不簡單,用上viewpage再設(shè)置圓點,折騰一通之后還一堆bug.今天嘗試微信小程序開發(fā)做輪播圖,真是感動的淚流滿面.廢話說完了,上圖.
上圖就是一個簡易的輪播圖,是不是很簡易.23333
主要是代碼也很簡單.
1.index.wxml
<!--index.wxml-->
<swiper class="swiper" indicator-dots="true" autoplay="true" interval="5000" duration="1000">
<block wx:for="{{movies}}" wx:for-index="index">
<swiper-item>
<image src="{{item.url}}" class="slide-image" mode="aspectFill"/>
</swiper-item>
</block>
</swiper>
這里有幾個屬性需要說明.
微信小程序開發(fā)的循環(huán)用到了<block wx:for >
我這里是遍歷movies[]數(shù)組.<swiper-item>就是item
2.index.js
//index.js
//獲取應(yīng)用實例
var app = getApp()
Page({
data: {
movies:[
{url:'http://img04.tooopen.com/images/20130712/tooopen_17270713.jpg'} ,
{url:'http://img04.tooopen.com/images/20130617/tooopen_21241404.jpg'} ,
{url:'http://img04.tooopen.com/images/20130701/tooopen_20083555.jpg'} ,
{url:'http://img02.tooopen.com/images/20141231/sy_78327074576.jpg'}
]
},
onLoad: function () {
}
})
3.WXML
/**index.wxss**/
.swiper {
height: 400rpx;
width: 100%;
}
.swiper image {
height: 100%;
width: 100%;
}
WXSS不多說,跟CSS沒啥區(qū)別.
感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
您可能感興趣的文章:
相關(guān)文章
微信小程序組件 contact-button（客服會話按鈕）詳解及實例代碼
這篇文章主要介紹了微信小程序組件 contact-button（客服會話按鈕）詳解及實例代碼的相關(guān)資料,需要的朋友可以參考下2017-01-01
關(guān)于JavaScript防抖與節(jié)流的區(qū)別與實現(xiàn)
這篇文章主要介紹關(guān)于JavaScript防抖與節(jié)流的區(qū)別與實現(xiàn)，防抖就是用戶多次觸發(fā)事件，在用戶一直觸發(fā)事件中，事件不會執(zhí)行，只有在用戶停止觸發(fā)事件一段時間之后再執(zhí)行這個事件一次，二節(jié)流是用戶多次觸發(fā)事件，具體詳情一i起來學習下面文章內(nèi)容吧2021-10-10
這篇文章主要介紹了微信小程序 本地圖片按照屏幕尺寸處理的相關(guān)資料,這里提供具體實現(xiàn)步驟，需要的朋友可以參考下2017-08-08
本文針對埋點系統(tǒng)和監(jiān)控系統(tǒng)的融合的一點進行簡單的介紹與探索，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
這篇文章主要為大家介紹了JS圖形編輯器實現(xiàn)標尺功能示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
這篇文章主要為大家介紹了Electron?中的快捷鍵使用技巧及示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
這篇文章主要介紹了微信小程序開發(fā)入門基礎(chǔ)教程的相關(guān)資料,需要的朋友可以參考下2017-04-04
這篇文章主要為大家介紹了ECMAScript?modules規(guī)范示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
這篇文章主要為大家介紹了TS 類型收窄教程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
在微信小程序中渲染HTML內(nèi)容3種解決方案及分析與問題解決
在開發(fā)微信小程序時我們會在小程序內(nèi)加入純HTML代碼，且HTML中包括圖片，視頻，甚至是事件，微信小程序為我們提供了3種解決方法，但它們的功能與實現(xiàn)方式與最終效果并不理想2020-01-01