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