快捷導(dǎo)航

微信小程序 swiper組件輪播圖詳解及實(shí)例

更新時(shí)間：2016年11月16日 11:52:27 作者：dzp_coder

這篇文章主要介紹了微信小程序 swiper組件輪播圖詳解及實(shí)例的相關(guān)資料,需要的朋友可以參考下

微信小程序 swiper組件輪播圖

照著開(kāi)發(fā)文檔嘗試,總是能有所收獲.之前做Android開(kāi)發(fā),做個(gè)輪播圖并不簡(jiǎn)單,用上viewpage再設(shè)置圓點(diǎn),折騰一通之后還一堆bug.今天嘗試微信小程序開(kāi)發(fā)做輪播圖,真是感動(dòng)的淚流滿(mǎn)面.廢話(huà)說(shuō)完了,上圖.

上圖就是一個(gè)簡(jiǎn)易的輪播圖,是不是很簡(jiǎn)易.23333

主要是代碼也很簡(jiǎn)單.

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>

這里有幾個(gè)屬性需要說(shuō)明.

微信小程序開(kāi)發(fā)的循環(huán)用到了<block wx:for >

我這里是遍歷movies[]數(shù)組.<swiper-item>就是item

2.index.js

//index.js  
//獲取應(yīng)用實(shí)例  
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不多說(shuō),跟CSS沒(méi)啥區(qū)別.

感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！

您可能感興趣的文章:

相關(guān)文章

微信小程序組件 contact-button（客服會(huì)話(huà)按鈕）詳解及實(shí)例代碼
這篇文章主要介紹了微信小程序組件 contact-button（客服會(huì)話(huà)按鈕）詳解及實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下
2017-01-01
關(guān)于JavaScript防抖與節(jié)流的區(qū)別與實(shí)現(xiàn)
這篇文章主要介紹關(guān)于JavaScript防抖與節(jié)流的區(qū)別與實(shí)現(xiàn)，防抖就是用戶(hù)多次觸發(fā)事件，在用戶(hù)一直觸發(fā)事件中，事件不會(huì)執(zhí)行，只有在用戶(hù)停止觸發(fā)事件一段時(shí)間之后再執(zhí)行這個(gè)事件一次，二節(jié)流是用戶(hù)多次觸發(fā)事件，具體詳情一i起來(lái)學(xué)習(xí)下面文章內(nèi)容吧
2021-10-10
微信小程序本地圖片按照屏幕尺寸處理
這篇文章主要介紹了微信小程序本地圖片按照屏幕尺寸處理的相關(guān)資料,這里提供具體實(shí)現(xiàn)步驟，需要的朋友可以參考下
2017-08-08
js前端埋點(diǎn)監(jiān)控解析
本文針對(duì)埋點(diǎn)系統(tǒng)和監(jiān)控系統(tǒng)的融合的一點(diǎn)進(jìn)行簡(jiǎn)單的介紹與探索，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-07-07
JS圖形編輯器實(shí)現(xiàn)標(biāo)尺功能示例詳解
這篇文章主要為大家介紹了JS圖形編輯器實(shí)現(xiàn)標(biāo)尺功能示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-01-01
一文詳解Electron?快捷鍵使用技巧及示例
這篇文章主要為大家介紹了Electron?中的快捷鍵使用技巧及示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-03-03
微信小程序開(kāi)發(fā)入門(mén)基礎(chǔ)教程
這篇文章主要介紹了微信小程序開(kāi)發(fā)入門(mén)基礎(chǔ)教程的相關(guān)資料,需要的朋友可以參考下
2017-04-04
ECMAScript?modules規(guī)范示例詳解
這篇文章主要為大家介紹了ECMAScript?modules規(guī)范示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-11-11
TS 類(lèi)型收窄教程示例詳解
這篇文章主要為大家介紹了TS 類(lèi)型收窄教程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-09-09
在微信小程序中渲染HTML內(nèi)容3種解決方案及分析與問(wèn)題解決
在開(kāi)發(fā)微信小程序時(shí)我們會(huì)在小程序內(nèi)加入純HTML代碼，且HTML中包括圖片，視頻，甚至是事件，微信小程序?yàn)槲覀兲峁┝?種解決方法，但它們的功能與實(shí)現(xiàn)方式與最終效果并不理想
2020-01-01