小程序輪播圖

今天給大家分享一個在微信開發者工具開發微信小程序的簡單案例——輪播圖（只用wxml和wxss）
話不多說，直接上代碼！！！

效果圖

WXML代碼

基本屬性介紹 <!-- indicator-dots 是否顯示面板 --> <!-- circular 銜接滑動 --> <!-- autoplay 是否自動切換 --> <swiper class="swiper-container" indicator-dots indicator-color="gray" indicator-active-color="red"autoplay="true"interval="2000" circular="true"> <swiper-item><image src="../img/01.jpg" alt="" srcset="" style="width: 100%;"></image>> </swiper-item> <swiper-item><image src="../img/02.jpg" alt="" srcset="" style="width: 100%;"></image>> </swiper-item> <swiper-item><image src="../img/03.jpg" alt="" srcset="" style="width: 100%;"></image>> </swiper-item> </swiper> .swiper-container{height: 200px;//設置一個簡單的樣式高度 }

效果實現其實靠得微信小程序開發里的swiper組件
基本屬性：
indicator-dots 是否顯示面板
circular 銜接滑動 -
autoplay 是否自動切換
indicator-color和indicator-active-color 控制顏色
interval：設置輪播圖延時

總結

以上是生活随笔為你收集整理的微信小程序最简单的轮播图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。