微信小程序 swiper組件構(gòu)建輪播圖的實(shí)例
更新時(shí)間：2017年09月20日 15:33:29 投稿：lqh
這篇文章主要介紹了微信小程序 swiper組件構(gòu)建輪播圖的實(shí)例的相關(guān)資料,如有疑問(wèn)請(qǐng)留言或者到本站社區(qū)交流討論，需要的朋友可以參考下
微信小程序 swiper組件構(gòu)建輪播圖的實(shí)例
實(shí)現(xiàn)效果圖：
wxml基礎(chǔ)文件：
<view class="classname">
<swiper indicator-dots="true" interval="1000" autoplay="true" indicator-active-color="red">
<swiper-item><image src="/images/1.jpg"></image></swiper-item>
<swiper-item><image src="/images/2.jpg"></image></swiper-item>
<swiper-item><image src="/images/3.jpg"></image></swiper-item>
</swiper>
</view>
swiper-item僅可放置在組件中，寬高自動(dòng)設(shè)置為100%。 參數(shù)設(shè)置： autoplay 自動(dòng)播放導(dǎo)致swiper變化； touch 用戶劃動(dòng)引起swiper變化； indicator-dots true是否顯示面板指示點(diǎn)圓圈； interval 自動(dòng)切換時(shí)間間隔； duration 滑動(dòng)動(dòng)畫(huà)時(shí)長(zhǎng); 更多設(shè)置可以看官方文檔組件！
wxss樣式文件
swiper{
width:100%;
height:500rpx;
}
swiper image{
width:100%;
height:500rpx;
}
app.json文件入口
{
"pages": [
"pages/redirect/redirect"
],
"window": {
"navigationBarBackgroundColor": "#405f80"
}
}
如有疑問(wèn)請(qǐng)留言或者到本站社區(qū)交流討論，感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！
相關(guān)文章
jscpd統(tǒng)計(jì)項(xiàng)目中的代碼重復(fù)度使用詳解
這篇文章主要為大家介紹了jscpd統(tǒng)計(jì)項(xiàng)目中的代碼重復(fù)度使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
這篇文章主要介紹了JavaScript Dom對(duì)象的操作,文張以瀏覽器網(wǎng)頁(yè)就是一個(gè)Dom樹(shù)形結(jié)構(gòu)做為核心，然后根據(jù)核心進(jìn)行更新Dom節(jié)點(diǎn)、獲得Dom節(jié)點(diǎn)、刪除一個(gè)Dom節(jié)點(diǎn)、添加一個(gè)新的節(jié)點(diǎn)操作，下面文章是詳細(xì)內(nèi)容,需要的朋友可以參考以下2021-11-11
Javascript使用integrity屬性進(jìn)行安全驗(yàn)證
這篇文章主要介紹了Javascript使用integrity屬性進(jìn)行安全驗(yàn)證，在html中，script標(biāo)簽可以通過(guò)src屬性引入一個(gè)js文件，引入的js文件可以是本地的，也可以是遠(yuǎn)程的，下面我們一起來(lái)看看文章詳細(xì)內(nèi)容2021-11-11
js有多種數(shù)據(jù)類型（Number（數(shù)值）、String（字符串）、Boolean（布爾值）、Null、Undefined、Symbol、Object、函數(shù)等），在開(kāi)發(fā)過(guò)程中難免需要判斷數(shù)據(jù)類型，本文總結(jié)了四種判斷方法給大家分享,需要的朋友可以參考一下2021-11-11
這篇文章主要介紹了 微信小程序 Buffer緩沖區(qū)的詳解的相關(guān)資料,需要的朋友可以參考下2017-07-07
gulp-font-spider實(shí)現(xiàn)中文字體包壓縮實(shí)踐
這篇文章主要為大家介紹了gulp-font-spider實(shí)現(xiàn)中文字體包壓縮實(shí)踐詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
這篇文章主要介紹了微信小程序radio組件詳細(xì)介紹的相關(guān)資料,需要的朋友可以參考下2016-09-09
這篇文章主要介紹了微信小程序 跳轉(zhuǎn)方式總結(jié)的相關(guān)資料,需要的朋友可以參考下2017-04-04
JS實(shí)現(xiàn)刷新網(wǎng)頁(yè)后之前瀏覽位置保持不變示例詳解
這篇文章主要為大家介紹了JS實(shí)現(xiàn)刷新網(wǎng)頁(yè)后之前瀏覽位置保持不變示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
js 實(shí)現(xiàn)驗(yàn)證碼輸入框示例詳解
這篇文章主要為大家介紹了js 實(shí)現(xiàn)驗(yàn)證碼輸入框示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09