微信小程序 swiper組件構建輪播圖的實例
實現效果圖：
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%。 參數設置： 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" }}如有疑問請留言或者到本站社區交流討論，感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
新聞熱點
疑難解答
