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

微信小程序 video詳解及簡(jiǎn)單實(shí)例
這篇文章主要介紹了微信小程序 video詳解及簡(jiǎn)單實(shí)例的相關(guān)資料,需要的朋友可以參考下
2017-01-01
微信小程序 vidao實(shí)現(xiàn)視頻播放和彈幕的功能
這篇文章主要介紹了微信小程序 vidao實(shí)現(xiàn)視頻播放和彈幕的功能的相關(guān)資料,這里提供實(shí)現(xiàn)代碼及實(shí)現(xiàn)效果圖，需要的朋友可以參考下
2016-11-11
微信小程序頁(yè)面滑動(dòng)事件的實(shí)例詳解
這篇文章主要介紹了微信小程序頁(yè)面滑動(dòng)事件的實(shí)例詳解的相關(guān)資料,希望通過(guò)本文能幫助到大家，讓大家實(shí)現(xiàn)這樣的功能，需要的朋友可以參考下
2017-10-10
為什么我們要做三份 Webpack 配置文件
前端從開(kāi)發(fā)到部署前都離不開(kāi) Webpack 的參與，本文結(jié)合了我們自己在開(kāi)發(fā)中碰到的種種問(wèn)題解決方案，同時(shí)借鑒了很多開(kāi)源項(xiàng)目的配置來(lái)介紹一種用 3 個(gè) JS 文件來(lái)配置 Webpack 的方法。
2017-09-09
lodash內(nèi)部方法getFuncName及setToString剖析詳解
本篇章我們主要是通過(guò)了解lodash里的兩個(gè)內(nèi)部方法getFuncName方法和setToString方法，在實(shí)際開(kāi)發(fā)中我們也可以借鑒方法的實(shí)現(xiàn)思路，在需要的時(shí)候簡(jiǎn)單封裝一下，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-09-09
Rxjs監(jiān)聽(tīng)精確使用版本上線
這篇文章主要為大家介紹了Rxjs監(jiān)聽(tīng)使用不精確版本上線晚3小時(shí)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-08-08
微信小程序 swiper組件詳解及實(shí)例代碼
這篇文章主要介紹了微信小程序 swiper組件詳解及實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下
2016-10-10
JS前端二維數(shù)組生成樹(shù)形結(jié)構(gòu)示例詳解
這篇文章主要為大家介紹了JS前端二維數(shù)組生成樹(shù)形結(jié)構(gòu)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-09-09
微信小程序頁(yè)面?zhèn)鲄?shí)例詳解
這篇文章主要介紹了微信小程序頁(yè)面?zhèn)鲄?shí)例詳解的相關(guān)資料,這里對(duì)頁(yè)面跳轉(zhuǎn)及傳遞參數(shù)的功能做個(gè)小示例，幫助大家盡快上手，很簡(jiǎn)單，需要的朋友可以參考下
2016-11-11
關(guān)于前端JavaScript ES6詳情
這篇文章主要介紹了關(guān)于前端JavaScript中的ES6，ES6是一個(gè)泛指，含義是 5.1 版以后的 JavaScript 的下一代標(biāo)準(zhǔn)，涵蓋了 ES2015、ES2016、ES2017語(yǔ)法標(biāo)準(zhǔn)，ES6新特性目前只有在一些較新版本瀏覽器得到支持，老版本瀏覽器里面運(yùn)行我們需要將ES6轉(zhuǎn)換為ES5
2021-10-10