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