微信小程序中的swiper組件詳解
更新時間：2017年04月14日 11:05:56 作者：HaiJing1995
這篇文章主要介紹了微信小程序中的swiper組件詳解的相關(guān)資料,需要的朋友可以參考下
微信小程序中的swiper組件
微信小程序中的swiper組件真的是簡單方便
提供了頁面中圖片文字等滑動的效果
<swiper> <swiper-item></swiper-item> <swiper-item></swiper-item> <swiper-item></swiper-item> </swiper>
這里的就是一個滑塊視圖容器；而就是你希望滑動的東西，可以是文字也可以是image
其中swiper有很多屬性。常用的有
- 屬性名 默認(rèn)值 作用
- indicator-dots false 是否顯示面板指示點(diǎn)
- indicator-color rgba(0, 0, 0, .3) 指示點(diǎn)的顏色
- indicator-active-color #000000 當(dāng)前選中的指示點(diǎn)顏色
- autoplay false 是否自動播放
- intervaly 5000 自動切換時間間隔
更多的屬性可以去查看微信小程序官方教程
https://mp.weixin.qq.com/debug/wxadoc/dev/component/swiper.html
這里vertical=”true”在官方文檔中沒有提到，定義這個可以上下滑動
還有一點(diǎn)需要注意vertical=”false”時，仍然是上下滑動，原因就是微信小程序在解析時將”false”看成字符串，只要字符串不為空，就為真。所以我們需要這樣寫：vertical=”{{false}}”
感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
您可能感興趣的文章:
- 微信小程序 swiper組件輪播圖詳解及實(shí)例
- 微信小程序 swiper制作tab切換實(shí)現(xiàn)附源碼
- 微信小程序 解決swiper不顯示圖片的方法
- 微信小程序 輪播圖swiper詳解及實(shí)例（源碼下載）
- 微信小程序之swiper輪播圖中的圖片自適應(yīng)高度的方法
- 微信小程序?qū)崿F(xiàn)tab和swiper切換結(jié)合效果
- 微信小程序 教程之wxapp視圖容器 swiper
- 微信小程序?qū)崿F(xiàn)頂部普通選項卡效果(非swiper)
- 微信小程序使用swiper組件實(shí)現(xiàn)類3D輪播圖
- 微信小程序之swiper滑動面板用法示例
相關(guān)文章
前端利用jsencrypt.js進(jìn)行RSA加密示例詳解
這篇文章主要為大家介紹了前端利用jsencrypt.js進(jìn)行RSA加密示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
這篇文章主要介紹了JavaScript中的宏任務(wù)和微任務(wù)，下面文章圍繞JavaScript宏任務(wù)和微任務(wù)相關(guān)資料展開詳細(xì)內(nèi)容,需要的朋友可以參考一下，希望對大家有所幫助2021-11-11
這篇文章主要為大家介紹了詳解無界微前端是如何渲染子應(yīng)用demo解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
這篇文章主要介紹了微信小程序 本地數(shù)據(jù)讀取實(shí)例的相關(guān)資料,需要的朋友可以參考下2017-04-04
這篇文章主要為大家介紹了前端使用koa實(shí)現(xiàn)大文件分片上傳示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
JavaScript前端迭代器Iterator與生成器Generator講解
這篇文章主要為大家介紹了JavaScript前端迭代器Iterator與生成器Generator講解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-08-08 
JS、HTML代碼運(yùn)行工具...
2006-06-06 
這篇文章主要介紹了微信小程序 Image API實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下
2016-09-09 
JavaScript數(shù)組 幾個常用方法總結(jié)
這篇文章主要介紹了JavaScript數(shù)組 幾個常用方法，主要概述的方法有filter()、map()、sort()、reduce()、forEach()，這些方法都是JavaScript常用到的方法，下面文章內(nèi)容詳細(xì)介紹了他們的語法、參數(shù)、返回值等資料,需要的朋友可以參考一下
2021-11-11