微信小程式功能-----基礎輪播圖配置

昨夜小楼听风雨發表於2024-04-22
微信小程式

使用swiper設定輪播圖，下面是實現效果圖

頁面結構

<swiper class="content-info-slide" indicator-color="rgba(255,255,255,.5)" indicator-active-color="#fff" indicator-dots circular autoplay>
  <swiper-item>
    <image src="/pages/images/test.png" />
  </swiper-item>
  <swiper-item>
    <image src="/pages/images/1.png" />
  </swiper-item>
  <swiper-item>
    <image src="/pages/images/2.png" />
  </swiper-item>
</swiper>

css樣式

.content-info-slide{
  height: 302rpx;
  margin-bottom: 20px;
}
.content-info-slide image{
  width: 100%;
  height: 100%;
}

將圖片的寬高都設定為100%佔滿設定的區域

相關文章