微信小程式------輪播圖------縱向輪播圖

昨夜小楼听风雨發表於2024-05-28

頁面結構

<swiper indicator-color="white" indicator-active-color="#ff4c91" indicator-dots autoplay interval="3500" duration="1000"  vertical circular> 
  <swiper-item wx:for="{{imgUrls}}" wx:key="*this">
    <image src="{{item}}" mode="aspectFill" />
  </swiper-item>
</swiper>

css樣式

swiper{
  height: 100vh;
}
image{
  width: 100vw;
  height: 100vh;
}

js樣式

  data: {
    imgUrls:[
      '/pages/images/1.png','/pages/images/2.png','/pages/images/test.png'
    ]
  },

  樣式圖

相關文章