微信小程序 swiper組件構建輪播圖的實例
實現效果圖:
wxml基礎文件:
<view class="classname"> <swiper indicator-dots="true" interval="1000" autoplay="true" indicator-active-color="red"> <swiper-item><image src="https://www.gxlcms.com/images/1.jpg"></image></swiper-item> <swiper-item><image src="https://www.gxlcms.com/images/2.jpg"></image></swiper-item> <swiper-item><image src="https://www.gxlcms.com/images/3.jpg"></image></swiper-item> </swiper> </view>
swiper-item僅可放置在組件中,寬高自動設置為100%。 參數設置: 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" } }
如有疑問請留言或者到本站社區交流討論,感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持!
聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com