微信小程序 開發(fā)之滑塊視圖容器(swiper)詳解及實例代碼
更新時間：2017年02月22日 10:13:53 作者：何東_hd
這篇文章主要介紹了微信小程序 開發(fā)之滑塊視圖容器(swiper)詳解及實例代碼的相關(guān)資料,需要的朋友可以參考下
微信小程序 開發(fā)之滑塊視圖容器詳解
實現(xiàn)效果圖：
實現(xiàn)起來特別簡單，看看代碼是怎么寫的呢：
<swiper class="swiper" indicator-dots="{{indcatorDots}}" autoplay="{{autoPlay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{imgUrls}}" wx:for-index="index">
<swiper-item>
<image src="{{item}}" class="side-img"></image>
</swiper-item>
</block>
</swiper>
這就是布局了，看一下js里面代碼：
Page({
data: {
imgUrls: [
'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'],
indcatorDots: true,
autoPlay: true,
interval: 5000,
duration: 500
},
，swiper有以下一些常用屬性：
標記的兩個屬性暫時不管。
注意：其中只可放置組件，否則會導致未定義的行為。
swiper-item
僅可放置在組件中，寬高自動設置為100%。
就是這樣，自己動手試試。
感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
您可能感興趣的文章:
相關(guān)文章
這篇文章主要介紹了微信小程序圖片寬100%顯示并且不變形的相關(guān)資料,需要的朋友可以參考下2017-06-06
這篇文章主要為大家介紹了Web Worker線程解決方案electron踩坑記錄，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
這篇文章主要為大家介紹了Array.reduce使用原理示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
這篇文章主要介紹了微信小程序 前端源碼邏輯和工作流詳解的相關(guān)資料,需要的朋友可以參考下2016-10-10
本文將詳細介紹Vuex的API文檔,需要的朋友可以參考下2020-02-02
這篇文章主要為大家介紹了WebAssembly使用方法研究,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-08-08
這篇文章主要介紹了微信小程序 檢查接口狀態(tài)實例詳解的相關(guān)資料,需要的朋友可以參考下2017-06-06
這篇文章主要介紹JS的深淺復制，之所以會出現(xiàn)深淺拷貝的問題，實質(zhì)上是由于JS對基本類型和引用類型的處理不同。下面感興趣的小伙伴請跟小編一起來學習吧2021-10-10
國慶節(jié)到了,利用JS實現(xiàn)一個生成國慶風頭像的小工具 詳解實現(xiàn)過程
明天就是國慶節(jié)了，最近看到好多好友換了國慶風的頭像，感覺這個挺有意思，就找到了類似的源碼研究了一番，并進行了改造（并非原創(chuàng)，只是進行了改造，只要想分享一下實現(xiàn)思路）。下面就來看看如何實現(xiàn)一鍵生成國慶風頭像小工具。​2021-09-09
這篇文章主要介紹了微信小程序 獲取設備信息 API實例詳解的相關(guān)資料,需要的朋友可以參考下2016-10-10